Generador de Degradados CSS Online — Degradados Lineales, Radiales, Cónicos

Un degradado lineal crea una transición de color suave a lo largo de una línea recta. Ajusta el ángulo de 0° a 360° y añade hasta 10 colores.

Syntax:

background: linear-gradient(angle, color1 position%, color2 position%);

Examples:

• linear-gradient(90deg, #667eea 0%, #764ba2 100%)
• linear-gradient(135deg, #f857a6 0%, #ff5858 100%)
• linear-gradient(to right, #ee0979 0%, #ff6a00 100%)

Un degradado radial crea una transición de color desde el centro hacia afuera en forma de círculo o elipse.

Syntax:

background: radial-gradient(shape size at position, color1, color2);

Examples:

• radial-gradient(circle, #667eea 0%, #764ba2 100%)
• radial-gradient(ellipse at center, #f857a6 0%, #ff5858 100%)
• radial-gradient(circle at top left, #ee0979 0%, #ff6a00 100%)

Un degradado cónico crea una transición de color alrededor de un punto central. Perfecto para ruedas de color y gráficos circulares.

Syntax:

background: conic-gradient(from angle at position, color1, color2);

Examples:

• conic-gradient(from 0deg, #667eea, #764ba2, #667eea)
• conic-gradient(from 45deg at center, #f857a6 0%, #ff5858 100%)
• conic-gradient(from 90deg, red, yellow, green, blue, red)

Los degradados CSS se usan ampliamente en diseño web moderno para fondos, botones y elementos UI.

• Secciones hero con fondo degradado
• Botones con degradados
• Tarjetas de producto
• Overlay degradado en imágenes
• Degradados animados
• Bordes degradados

Los degradados funcionan bien en dispositivos móviles sin archivos de imagen pesados.

• Barras de estado y navegación
• Pantallas splash
• Barras de progreso
• Fondos de pantalla
• Iconos con degradado
• Pantallas temáticas

Los degradados sirven para crear visualizaciones y gráficos directamente en el navegador.

• Mapas de calor
• Gráficos con degradados
• Indicadores de progreso
• Gráficos lineales
• Selectores de color
• Botones de redes sociales

Todos los modernos: Chrome, Firefox, Safari, Edge, Opera. Lineales y radiales desde 2011, cónicos desde 2017.

No, la sintaxis estándar funciona en todos los navegadores modernos sin -webkit- ni -moz-.

Técnicamente sin límite, pero se recomiendan 2-5. El generador soporta hasta 10 colores.

Con ángulo (0-360deg) o palabras clave (to top, to right). El generador tiene un deslizador para control preciso.

Los degradados CSS son muy eficientes — renderizados por el navegador sin peticiones HTTP. Mucho más ligeros que imágenes.

Usa rgba() o hsla(). Ejemplo: linear-gradient(90deg, rgba(255,0,0,0.8) 0%, rgba(0,0,255,0.5) 100%)