Guía de Degradados CSS: Degradados Lineales, Radiales y Cónicos

Los degradados CSS permiten crear transiciones suaves entre dos o más colores directamente en el navegador, sin una sola solicitud de imagen. Introducidos en CSS3 y ahora universalmente soportados, los degradados han evolucionado de simples fundidos de dos paradas a sofisticados elementos visuales capaces de producir texturas, patrones geométricos y efectos dimensionales. Esta guía recorre cada tipo de degradado CSS, explica la sintaxis en detalle y muestra ejemplos prácticos con códigos hex que puedes añadir directamente a tus hojas de estilos.

¿Qué Es un Degradado CSS?

Un degradado CSS es un tipo especial de valor <image>. Genera una transición de color de forma programática, lo que significa que el navegador calcula los colores intermedios entre las paradas de color definidas. Dado que los degradados son imágenes en lugar de colores, los aplicas con background-image o la propiedad abreviada background — no con background-color.

Los tres tipos de degradado en CSS son:

• linear-gradient() — los colores hacen la transición a lo largo de una línea recta
• radial-gradient() — los colores irradian hacia afuera desde un punto central
• conic-gradient() — los colores rotan alrededor de un punto central

Cada tipo también tiene una variante repeating-* (repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()) que repite el patrón de degradado en todo el elemento.

Degradados Lineales

Un degradado lineal dibuja una transición de color a lo largo de una línea recta con un ángulo especificado.

Sintaxis Básica

background: linear-gradient(direction, color-stop1, color-stop2, ...);

El parámetro direction es opcional. Sin él, el degradado fluye de arriba hacia abajo (equivalente a to bottom o 180deg).

/* De arriba hacia abajo (predeterminado) */
background: linear-gradient(#3B82F6, #1E3A8A);

/* De izquierda a derecha */
background: linear-gradient(to right, #3B82F6, #1E3A8A);

/* Diagonal */
background: linear-gradient(to bottom right, #3B82F6, #1E3A8A);

Sintaxis de Ángulo

Los ángulos se miden en grados en sentido horario desde la parte superior del elemento. 0deg apunta hacia arriba, 90deg apunta a la derecha, 180deg apunta hacia abajo.

/* Diagonal de 45 grados desde abajo-izquierda hacia arriba-derecha */
background: linear-gradient(45deg, #FF6B6B, #FFC300);

/* Diagonal de 135 grados desde arriba-izquierda hacia abajo-derecha */
background: linear-gradient(135deg, #667EEA, #764BA2);

Un caso de uso común es el fondo de una sección hero. Por ejemplo, un degradado de #667EEA a #764BA2 a 135 grados produce un diagonal morado-azul frío que funciona bien detrás de texto blanco.

Palabras Clave de Dirección

En lugar de ángulos, puedes usar palabras clave direccionales:

Las palabras clave son más legibles en revisiones de código y se documentan por sí solas. Reserva los grados explícitos para ángulos precisos que no caigan en una diagonal.

Múltiples Paradas de Color

Las paradas de color definen dónde comienza y termina cada color a lo largo de la línea de degradado. Puedes usar cualquier longitud o porcentaje CSS como posición.

/* Degradado de tres paradas */
background: linear-gradient(to right, #FF6B6B, #FFD93D, #6BCB77);

/* Paradas posicionadas */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FFD93D 50%,
  #6BCB77 100%
);

/* Parada de color dura (sin transición) */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FF6B6B 50%,
  #6BCB77 50%,
  #6BCB77 100%
);

La técnica de parada de color dura — establecer dos paradas en la misma posición — crea un borde nítido entre colores sin mezcla. Esto es útil para diseños tipo bandera, indicadores de progreso o fondos de pantalla dividida.

Sugerencia de Parada de Color

CSS soporta un punto de referencia intermedio entre dos paradas de color, dándote control sobre dónde la interpolación es más rápida o más lenta:

/* El degradado permanece más tiempo en el rango azul */
background: linear-gradient(to right, #3B82F6, 30%, #EF4444);

La sugerencia 30% le dice al navegador que el punto medio de la transición entre el azul #3B82F6 y el rojo #EF4444 debe ocurrir en la marca del 30%, haciendo que el azul permanezca y el rojo aparezca rápidamente.

Degradados Radiales

Un degradado radial emana hacia afuera desde un punto central, creando patrones circulares o elípticos.

Sintaxis Básica

background: radial-gradient(shape size at position, color-stop1, color-stop2);

Todos los parámetros son opcionales. El valor predeterminado produce un degradado elíptico centrado en el elemento, dimensionado para llegar a la esquina más lejana.

/* Radial central simple */
background: radial-gradient(#FFF176, #F57F17);

/* Círculo explícito */
background: radial-gradient(circle, #A8E063, #2D6A4F);

Forma

Los degradados radiales pueden ser circle (radio uniforme) o ellipse (predeterminado, se estira para ajustarse al elemento).

/* Círculo: mismo radio en todas las direcciones */
background: radial-gradient(circle, #FF9A9E, #A18CD1);

/* Elipse: se estira para ajustarse a las dimensiones del elemento */
background: radial-gradient(ellipse, #FF9A9E, #A18CD1);

Palabras Clave de Tamaño

El tamaño controla hasta dónde se extiende el degradado:

/* Pequeño foco de luz en la parte superior izquierda */
background: radial-gradient(circle closest-side at 25% 25%,
  rgba(255,255,255,0.8),
  transparent
);

Posición

La palabra clave at establece el punto central del degradado usando cualquier valor de posición CSS válido:

/* Degradado fuera de centro para un efecto de iluminación */
background: radial-gradient(circle at 70% 30%, #FFE066, #FF6B6B, #2D3561);

/* Foco de luz en la parte inferior central */
background: radial-gradient(ellipse at 50% 100%, #667EEA, #1a1a2e);

Posicionar los degradados fuera del centro crea la apariencia de una fuente de luz, lo cual es una técnica común en efectos de glassmorfismo y profundidad.

Degradados Cónicos

Un degradado cónico rota los colores alrededor de un punto central, similar a cómo se dibuja un gráfico circular. Se agregó a CSS más tarde que los otros tipos, pero ahora tiene soporte completo en los navegadores.

Sintaxis Básica

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

/* Degradado cónico básico */
background: conic-gradient(#FF6B6B, #FFD93D, #6BCB77, #4D96FF, #FF6B6B);

/* Empezando a 90 grados */
background: conic-gradient(from 90deg, #FF6B6B, #FFD93D, #6BCB77);

Gráficos Circulares con Degradados Cónicos

Los degradados cónicos son ideales para gráficos circulares en CSS puro:

/* Gráfico circular: 40% rojo, 35% azul, 25% verde */
background: conic-gradient(
  #EF4444 0deg 144deg,
  #3B82F6 144deg 270deg,
  #22C55E 270deg 360deg
);
border-radius: 50%;

El cálculo es simple: multiplica el porcentaje por 3.6 para obtener grados (40% × 3.6 = 144deg).

Ruedas de Color con Degradados Cónicos

Un degradado cónico completo que cicla por todos los tonos recrea una rueda de color:

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%)
);
border-radius: 50%;

Patrones de Tablero y Rayas

La variante repeating-conic-gradient() crea patrones geométricos:

/* Tablero de ajedrez */
background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
background-size: 40px 40px;

Degradados Repetitivos

Cada tipo de degradado tiene una variante repetitiva que repite el patrón definido de forma continua:

/* Rayas diagonales */
background: repeating-linear-gradient(
  45deg,
  #F3F4F6,
  #F3F4F6 10px,
  #E5E7EB 10px,
  #E5E7EB 20px
);

/* Anillos concéntricos */
background: repeating-radial-gradient(
  circle,
  #3B82F6,
  #3B82F6 10px,
  transparent 10px,
  transparent 30px
);

Los degradados repetitivos son eficientes para efectos de textura — líneas diagonales estilo marca de agua en fondos, o anillos concéntricos para una estética de retícula de apuntado.

Transparencia en Degradados

Usar valores transparent o rgba() en degradados crea efectos de aparición y desaparición gradual:

/* Desvanecerse en la parte inferior (el contenido de abajo sigue siendo visible) */
background: linear-gradient(to bottom,
  #1E3A8A 0%,
  rgba(30, 58, 138, 0) 100%
);

/* Superposición de viñeta */
background: radial-gradient(ellipse at center,
  transparent 60%,
  rgba(0, 0, 0, 0.5) 100%
);

Ten en cuenta que transparent en CSS es rgba(0,0,0,0) — negro completamente transparente — lo que puede producir bandas grises inesperadas al hacer la transición desde un valor de color. Para evitar esto, usa la versión completamente transparente de tu color:

/* Correcto: versión transparente del azul */
background: linear-gradient(to right, #3B82F6, rgba(59, 130, 246, 0));

/* Incorrecto: introduce bandas grises */
background: linear-gradient(to right, #3B82F6, transparent);

Capas de Múltiples Degradados

La propiedad background acepta múltiples valores separados por comas. Cada degradado se apila sobre el anterior:

/* Superposición diagonal sobre un color sólido */
background:
  linear-gradient(135deg, rgba(255,107,107,0.3) 0%, transparent 50%),
  linear-gradient(to bottom, #1E3A8A, #2D6A9F);

/* Simulación de textura de ruido con degradados */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  ),
  linear-gradient(135deg, #667EEA, #764BA2);

Los degradados en capas reducen las solicitudes HTTP que de otro modo requerirían múltiples imágenes de fondo, mientras te dan control total con CSS sobre los colores y las dimensiones.

Rendimiento de los Degradados CSS

Los degradados son calculados por la GPU y generalmente son eficientes. Sin embargo, algunos patrones vale la pena evitar en contextos sensibles al rendimiento:

• Degradados animados: CSS no puede hacer la transición entre dos valores diferentes de background-image. Animar degradados requiere cambiar propiedades personalizadas CSS (variables) o usar JavaScript. Una solución alternativa es animar background-position en un degradado más grande.
• Patrones repetitivos complejos: Tamaños de repetición muy pequeños (por debajo de 2px) en elementos grandes obligan al navegador a calcular miles de píxeles de degradado, lo que puede causar problemas de rendimiento de pintado.
• Evita filter: blur() en fondos de degradado durante la animación — esto es costoso para la GPU y causa entrecortamiento.

Para animación de degradados, usar propiedades personalizadas CSS con @property proporciona transiciones suaves con aceleración de hardware:

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.animated-gradient {
  background: linear-gradient(var(--gradient-angle), #667EEA, #764BA2);
  animation: rotate-gradient 4s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

Usando el Generador de Degradados

Aunque escribir degradados a mano es valioso para entender la sintaxis, el Generador de Degradados acelera el proceso significativamente. Puedes:

• Elegir colores de inicio y fin usando un selector de color visual o ingresando códigos hex directamente
• Establecer el ángulo del degradado con un control deslizante o entrada numérica
• Agregar múltiples paradas de color en posiciones precisas
• Previsualizar el degradado en tiempo real en diferentes tamaños de elemento
• Copiar el CSS terminado con un clic

Por ejemplo, para construir un degradado de atardecer, ingresa #FF6B6B como color de inicio, #FFC300 al 50% y #FF3C00 como final, luego establece el ángulo a 135 grados. El generador produce CSS listo para usar que puedes pegar directamente en tu hoja de estilos.

Combina el generador con el Conversor de Color cuando necesites trabajar con valores HSL o OKLCH en lugar de hex — los espacios de color modernos como OKLCH producen degradados más perceptualmente uniformes porque el eje de luminosidad es verdaderamente uniforme en todos los tonos.

Recetas Prácticas de Degradados

Fondo de Sección Hero

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

Diagonal azul-morado profundo, adecuado para páginas de aterrizaje SaaS.

Efecto de Hover en Tarjeta

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

Degradado sutil azul-gris claro de #F5F7FA a #C3CFE2.

Botón con Brillo Neón

background: linear-gradient(to right, #11998e, #38ef7d);
box-shadow: 0 4px 15px rgba(56, 239, 125, 0.4);

Verde vibrante de #11998E a #38EF7D.

Superficie en Modo Oscuro

background: linear-gradient(145deg, #1E1E2E 0%, #2D2D44 100%);

Sutil morado-azul oscuro para superficies de tarjeta en modo oscuro.

Degradado de Malla (aproximado con capas)

background:
  radial-gradient(ellipse at 20% 20%, rgba(103,126,234,0.5), transparent 50%),
  radial-gradient(ellipse at 80% 80%, rgba(118,75,162,0.5), transparent 50%),
  radial-gradient(ellipse at 50% 50%, rgba(255,107,107,0.3), transparent 60%),
  #1a1a2e;

Conclusiones Clave

• CSS ofrece tres tipos de degradado: linear-gradient() para transiciones en línea recta, radial-gradient() para patrones circulares o elípticos, y conic-gradient() para rotaciones estilo gráfico circular alrededor de un punto central.
• Cada tipo tiene una variante repeating-* que repite el patrón del degradado, útil para efectos de textura, rayas y patrones geométricos.
• Múltiples paradas de color con posiciones en porcentaje o píxel dan control preciso sobre dónde ocurren las transiciones; usar la misma posición para dos paradas crea un borde duro sin mezcla.
• Usa rgba() con alfa cero (no la palabra clave transparent sola) para evitar bandas grises al desvanecer un color hacia la transparencia.
• Múltiples degradados pueden apilarse en una sola declaración background, con cada degradado posicionado sobre el anterior.
• El Generador de Degradados te permite construir degradados complejos visualmente, con vista previa en tiempo real y exportación de CSS con un clic.