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

Los gradientes CSS crean transiciones suaves entre colores sin imágenes, lo que resulta en cero solicitudes HTTP, escalabilidad infinita y tamaños de archivo mínimos. El CSS moderno soporta tres tipos de gradientes, cada uno con potentes opciones de configuración. Esta guía los cubre todos con ejemplos prácticos que puedes usar de inmediato.

Gradientes Lineales

El tipo más común, que realiza la transición a lo largo de una línea recta:

/* Top to bottom (default) */
background: linear-gradient(#3B82F6, #8B5CF6);

/* With angle */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

/* With direction keywords */
background: linear-gradient(to right, #3B82F6, #8B5CF6);
background: linear-gradient(to bottom right, #3B82F6, #8B5CF6);

Paradas de Color

Controla dónde aparece cada color:

/* Even distribution (default) */
background: linear-gradient(#3B82F6, #8B5CF6, #EC4899);

/* Custom positions */
background: linear-gradient(#3B82F6 0%, #8B5CF6 30%, #EC4899 100%);

/* Hard stop (no transition) */
background: linear-gradient(#3B82F6 50%, #8B5CF6 50%);

Gradientes con Múltiples Paradas

Crea transiciones de color complejas:

/* Sunset gradient */
background: linear-gradient(
  to right,
  #1E3A5F 0%,
  #FF6B35 30%,
  #FFC947 50%,
  #FF6B35 70%,
  #1E3A5F 100%
);

/* Rainbow */
background: linear-gradient(
  90deg,
  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%)
);

Crea gradientes lineales visualmente con nuestro Generador de Gradientes — ajusta colores, ángulos y paradas en tiempo real.

Gradientes Radiales

Se expanden hacia afuera desde un punto central:

/* Circle from center */
background: radial-gradient(circle, #3B82F6, #1E3A8A);

/* Ellipse (default shape) */
background: radial-gradient(ellipse, #3B82F6, #1E3A8A);

/* Custom position */
background: radial-gradient(circle at top left, #3B82F6, #1E3A8A);
background: radial-gradient(circle at 25% 75%, #3B82F6, #1E3A8A);

Palabras Clave de Tamaño

/* closest-side: gradient reaches nearest edge */
background: radial-gradient(circle closest-side at 25% 50%, #3B82F6, #1E3A8A);

/* farthest-corner: gradient reaches farthest corner (default) */
background: radial-gradient(circle farthest-corner, #3B82F6, #1E3A8A);

/* Explicit size */
background: radial-gradient(circle 200px at center, #3B82F6, #1E3A8A);

Gradientes Cónicos

Rotan alrededor de un punto central como un gráfico circular:

/* Basic conic */
background: conic-gradient(#3B82F6, #8B5CF6, #EC4899, #3B82F6);

/* Pie chart segments */
background: conic-gradient(
  #3B82F6 0deg 120deg,
  #8B5CF6 120deg 240deg,
  #EC4899 240deg 360deg
);

/* From specific angle */
background: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);

/* Custom center */
background: conic-gradient(from 0deg at 25% 50%, #3B82F6, #8B5CF6, #3B82F6);

Gradientes Repetitivos

Los tres tipos soportan patrones repetitivos:

/* Striped pattern */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

/* Concentric rings */
background: repeating-radial-gradient(
  circle,
  #3B82F6 0px,
  #3B82F6 5px,
  #1E3A8A 5px,
  #1E3A8A 10px
);

/* Checkerboard (using conic) */
background: repeating-conic-gradient(
  #E5E7EB 0% 25%,
  #F9FAFB 0% 50%
);
background-size: 40px 40px;

Superposición de Múltiples Gradientes

CSS soporta múltiples fondos, permitiendo efectos complejos:

/* Gradient overlay on image */
background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
  url('hero.jpg');

/* Cross-hatch pattern */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  );

Patrones Prácticos de UI

Texto con Gradiente

.gradient-text {
  background: linear-gradient(135deg, #3B82F6, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Bordes con Gradiente

.gradient-border {
  border: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #3B82F6, #EC4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Fondo con Gradiente Animado

.animated-gradient {
  background: linear-gradient(-45deg, #3B82F6, #8B5CF6, #EC4899, #F59E0B);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Consideraciones de Rendimiento

Los gradientes están acelerados por GPU y son eficientes:

Los gradientes se renderizan más rápido que imágenes equivalentes
background-size afecta el costo de renderizado — los mosaicos más pequeños son más económicos
Evita animar los colores del gradiente directamente — anima background-position en su lugar
Los gradientes complejos con muchas paradas siguen siendo más rápidos que los PNG

Compatibilidad con Navegadores

Todos los navegadores modernos soportan gradientes lineales, radiales y cónicos. Los gradientes cónicos son los más nuevos, soportados desde 2020 en todos los navegadores principales (Chrome 69+, Firefox 83+, Safari 12.1+). No se necesitan prefijos de proveedor para ningún tipo de gradiente.

FAQ

¿Cómo creo un gradiente suave entre dos colores que se ven turbios?

Los gradientes turbios ocurren al hacer la transición entre colores que pasan por el gris en la rueda de color. Soluciones: agrega una parada de color intermedia en el punto medio con un tono más brillante, usa el espacio de color oklch (linear-gradient(in oklch, ...)) para transiciones perceptualmente uniformes, o aumenta la saturación del color del punto medio.

¿Pueden los gradientes reemplazar imágenes para fondos?

Para patrones abstractos, superposiciones y fondos decorativos — absolutamente. Los gradientes tienen tiempo de carga cero, escalan perfectamente y no requieren solicitudes HTTP. Para visuales complejos o fotografías, las imágenes siguen siendo necesarias. Muchos diseños modernos combinan ambos: una superposición de gradiente sobre una imagen de fondo.

Recursos Relacionados

Generador de Gradientes — Crea gradientes CSS visualmente
Consejos de Diseño de Paletas de Color — Elige colores para tus gradientes
Formatos de Color Explicados — Comprende la notación de color en CSS