Generador de degradados CSS: crea degradados bonitos sin escribir código

Los degradados CSS son una de las herramientas más potentes e infrautilizadas del kit del desarrollador frontend. Te permiten crear transiciones de color suaves, fondos llamativos, sutiles toques de pulido en la interfaz e incluso patrones visuales complejos — todo sin un solo archivo de imagen. Antes de que los degradados CSS tuvieran soporte universal, los diseñadores tenían que exportar los fondos degradados como PNG desde Photoshop, lo que resultaba en peticiones HTTP adicionales, recursos estáticos poco flexibles y diseños que se rompían en cuanto alguien cambiaba los colores de la marca. Hoy, una sola línea de CSS reemplaza todo eso.

Esta guía cubre todo lo que necesitas saber sobre los degradados CSS — los tres tipos, el sistema de ángulos, casos de uso reales con código listo para copiar, errores comunes y cómo usar el Generador de degradados CSS de BrowseryTools para crear exactamente lo que necesitas sin escribir una sola línea desde cero.

Por qué los degradados CSS reemplazaron a los fondos basados en imágenes

El enfoque antiguo — exportar un PNG degradado de 1×1000 px y repetirlo horizontalmente — tenía costes reales. Cada degradado era una ida y vuelta al servidor, un coste de bytes transmitidos y una carga de mantenimiento cuando los colores cambiaban. Más importante aún, los degradados PNG no podían responder dinámicamente a los tamaños de pantalla, los cambios de tema o los estados de hover.

Los degradados CSS resuelven todo esto. La GPU los representa en tiempo real, responden al instante a los cambios de estado de JavaScript, escalan perfectamente a cualquier resolución, funcionan con las transiciones y animaciones CSS y añaden cero bytes a tu paquete de recursos. El soporte de los navegadores es ahora del 100% en todos los navegadores modernos y lo es desde 2014. No hay razón para usar degradados basados en imágenes para transiciones de color sólidas en proyectos nuevos.

Los tres tipos de degradados CSS

1. Degradado lineal

Un degradado lineal transiciona los colores a lo largo de una línea recta. La dirección puede ser cualquier ángulo, o expresarse como una palabra clave como to right o to bottom right. Este es el tipo de degradado más usado y cubre la gran mayoría de las necesidades de diseño.

/* Classic diagonal purple gradient */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Top to bottom (default direction) */
background: linear-gradient(#f8fafc, #e2e8f0);

/* Left to right with three color stops */
background: linear-gradient(to right, #f97316, #ec4899, #8b5cf6);

2. Degradado radial

Un degradado radial irradia hacia fuera desde un punto central. Por defecto forma una elipse que se ajusta a la caja delimitadora del elemento, pero puedes controlar la forma, el tamaño y la posición. Los degradados radiales son ideales para efectos de foco, botones brillantes y simulaciones de luz ambiental.

/* Circular glow from center */
background: radial-gradient(circle, #6366f1 0%, #1e1b4b 100%);

/* Ellipse glow at top-left corner */
background: radial-gradient(ellipse at top left, #fbbf24 0%, transparent 60%);

/* Positioned spotlight */
background: radial-gradient(circle at 30% 40%, #e0f2fe, #0284c7);

3. Degradado cónico

Un degradado cónico barre los colores alrededor de un punto central, como las manecillas de un reloj. Esto lo hace especialmente adecuado para gráficos circulares, ruedas de color y animaciones de ruedas de carga. Fue el último de los tres tipos de degradado en obtener soporte universal, llegando a todos los navegadores principales en 2021.

/* Pie chart with three segments */
background: conic-gradient(
  #6366f1 0deg 120deg,
  #ec4899 120deg 240deg,
  #f97316 240deg 360deg
);

/* Color wheel */
background: conic-gradient(
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);

Entender el sistema de ángulos para los degradados lineales

El parámetro de ángulo en linear-gradient sigue una convención que sorprende a muchos desarrolladores porque difiere de los ángulos matemáticos estándar. Aquí tienes la correspondencia:

• 0deg — de abajo hacia arriba (el degradado fluye hacia arriba)
• 90deg — de izquierda a derecha (el degradado horizontal más común)
• 135deg — diagonal, de arriba a la izquierda hacia abajo a la derecha
• 180deg — de arriba hacia abajo (igual que el valor predeterminado sin ángulo especificado)
• 225deg — diagonal, de abajo a la derecha hacia arriba a la izquierda
• 270deg — de derecha a izquierda

Los equivalentes de palabra clave — to top, to right, to bottom left — suelen ser más legibles que los ángulos numéricos para las direcciones comunes. Para efectos diagonales precisos, los grados numéricos te dan un control exacto. El popular degradado diagonal de morado a índigo usa 135deg:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Formas del degradado radial: círculo frente a elipse

Por defecto, radial-gradient produce una elipse dimensionada para ajustarse al elemento. Puedes anular esto con dos palabras clave de forma:

• circle — fuerza un círculo perfecto sin importar la relación de aspecto del elemento. Úsalo para efectos de brillo y fondos de foco donde quieras una caída radial uniforme en todas las direcciones.
• ellipse — el valor predeterminado, se estira para ajustarse al contenedor. Úsalo para rellenos de fondo sutiles que necesiten adaptarse de forma natural a cualquier forma de elemento.

La palabra clave at te permite reposicionar el centro del degradado en cualquier punto del elemento usando cualquier longitud o porcentaje CSS. at center, at top left, at 20% 80% — todos son válidos. El posicionamiento es especialmente potente para crear efectos de luz ambiental descentrados:

/* Glow coming from upper-right corner */
background: radial-gradient(ellipse at top right, rgba(251,191,36,0.4), transparent 60%);

/* Multiple radial gradients layered */
background:
  radial-gradient(circle at 20% 30%, rgba(99,102,241,0.3), transparent 40%),
  radial-gradient(circle at 80% 70%, rgba(236,72,153,0.3), transparent 40%),
  #0f172a;

Degradados cónicos para gráficos circulares y ruedas de carga

La capacidad del degradado cónico de barrer en círculo lo convierte en la solución nativa de CSS para dos componentes de interfaz clásicos que antes requerían SVG o JavaScript:

Para un anillo de progreso, combina un degradado cónico con una máscara circular. Para un gráfico circular, los segmentos del degradado cónico corresponden directamente a los porcentajes de los datos. Un segmento que abarca de0deg a 72deg representa exactamente el 20% de un círculo completo. Esto hace que traducir los datos a CSS sea sencillo — multiplica el porcentaje por 3,6 para obtener el valor en grados.

Degradados con múltiples paradas y paradas duras para patrones de rayas

Las paradas de color no tienen que mezclarse de forma suave. Cuando dos paradas adyacentes comparten la misma posición, la transición entre ellas se vuelve instantánea — una parada dura. Esta técnica es como creas patrones de rayas, tableros de ajedrez y fondos de líneas reglón enteramente en CSS:

/* Candy stripe pattern using hard stops */
background: linear-gradient(
  45deg,
  #6366f1 25%,
  transparent 25%,
  transparent 50%,
  #6366f1 50%,
  #6366f1 75%,
  transparent 75%
);
background-size: 40px 40px;

/* Warning stripe — alternating color hard stops */
background: repeating-linear-gradient(
  -45deg,
  #fbbf24,
  #fbbf24 10px,
  #1e293b 10px,
  #1e293b 20px
);

Casos de uso reales con código de ejemplo

Fondos de secciones hero

Un degradado lineal con múltiples paradas combinado con una malla de dos reflejos radiales le da a las secciones hero la profundidad de una ilustración personalizada sin ningún archivo de imagen:

.hero {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.15), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(236,72,153,0.15), transparent 50%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  min-height: 100vh;
}

Efectos de hover en botones

Los degradados pueden animarse al pasar el cursor usando el truco de background-position — dimensiona el degradado al 200% y desplaza su posición al hacer hover:

.btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: background-position 0.4s ease;
}
.btn:hover {
  background-position: 100% 50%;
}

Bordes de tarjetas con border-image

La propiedad border-image acepta un degradado, lo que permite bordes degradados sin elementos contenedores ni trucos de pseudoelementos (para fondos sólidos):

.card-gradient-border {
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #6366f1, #ec4899) border-box;
}

Barras de progreso

Una barra de progreso con degradado comunica a la vez el valor y la energía visual. Combínala con una transición de width para una animación suave:

.progress-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  width: 73%; /* Controlled by JS or CSS custom property */
  transition: width 0.6s ease;
}

Comparación de tipos de degradado

Consejos para elegir buenos colores de degradado

El error más común al elegir los colores de un degradado es saltar directamente al otro lado de la rueda de color — por ejemplo, mezclar directamente de rojo a verde. Como el punto medio de esa transición pasa por un gris parduzco y turbio, el resultado parece poco atractivo aunque los colores de los extremos sean atractivos individualmente.

La solución es pasar por un tono intermedio más saturado. En lugar de rojo a verde directamente, prueba rojo → naranja → amarillo verdoso para una transición vibrante. Como alternativa, mantente dentro de un rango de tonos adyacentes — la familia de morado a rosa, la familia de índigo a cian — que siempre producen resultados limpios porque el punto medio se mantiene saturado.

Algunas pautas prácticas:

• Mantén la saturación alta en ambos extremos si quieres un degradado vivo. Mezclar un color saturado con uno sin saturar crea una incómoda zona muerta en el medio.
• Mezclar distintos valores de luminosidad (de claro a oscuro) dentro de la misma familia de tonos casi siempre tiene un aspecto profesional y funciona bien en fondos de interfaz.
• Añade una parada de color intermedia al 50% para dirigir el tono del punto medio — esta es la corrección más potente para los degradados turbios.
• Limita los degradados a dos o tres paradas para la mayoría del trabajo de interfaz. Más de tres paradas suele verse caótico a menos que estés creando intencionadamente un arcoíris o una visualización de datos.

Accesibilidad: texto sobre degradados

Usar el Generador de degradados CSS de BrowseryTools

El Generador de degradados CSS te da una vista previa visual en vivo a medida que configuras cada parámetro. Así es como usarlo de forma eficaz:

• Elige el tipo de degradado: alterna entre Lineal, Radial y Cónico en la parte superior de la herramienta.
• Añade paradas de color: haz clic en la barra de degradado para añadir nuevas paradas. Arrastra las paradas a izquierda y derecha para ajustar sus posiciones. Haz clic en una parada para abrir el selector de color y cambiar su color y opacidad.
• Ajusta la dirección o el ángulo: para los degradados lineales, arrastra la rueda de ángulo o escribe un valor preciso en grados. Para los degradados radiales, establece la forma y la posición.
• Previsualiza en contexto: la vista previa en vivo se actualiza al instante. Puedes ver exactamente cómo se verá tu degradado antes de copiar una sola línea.
• Copia el CSS: pulsa el botón Copiar CSS para obtener CSS listo para producción para la propiedad background, listo para pegar en cualquier hoja de estilos o framework.

Todo se ejecuta en tu navegador. No se envía ninguna definición de degradado a ningún sitio — es una herramienta puramente del lado del cliente. Puedes usarla sin conexión una vez que la página se haya cargado.

Soporte de los navegadores

Los degradados CSS tienen soporte en todos los navegadores principales desde 2014, lo que hace seguro usarlos sin ningún polyfill ni alternativa en prácticamente cualquier entorno de producción. Los degradados cónicos llegaron más tarde pero ahora tienen soporte completo en Chrome 69+, Firefox 83+, Safari 12.1+ y Edge 79+ — cubriendo bastante más del 97% del uso global de navegadores a fecha de 2026. El único escenario donde podrías necesitar una alternativa es dando soporte a versiones muy antiguas de Android WebView en aplicaciones móviles empresariales.