Gradiente CSS

Un gradiente CSS es una imagen generada por el navegador que muestra una transición suave entre dos o más colores. Se define con funciones como linear-gradient(), radial-gradient() o conic-gradient() y se aplica principalmente a la propiedad background-image. Es una herramienta fundamental en diseño web moderno: permite crear fondos, botones, barras de progreso e incluso iconos sin una sola imagen externa.

linear-gradient: gradiente lineal

Crea una transición a lo largo de una línea recta. La dirección se indica con palabras clave (to right, to bottom right) o en grados (90deg, 135deg):

/* De izquierda a derecha: azul → morado */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* En diagonal: naranja → rosa */
background: linear-gradient(135deg, #f97316, #ec4899);

/* Con tres paradas de color */
background: linear-gradient(to bottom, #1e3a5f, #3b82f6, #93c5fd);

Grados de referencia: 0deg es de abajo hacia arriba; 90deg es de izquierda a derecha; 180deg es de arriba hacia abajo.

radial-gradient: gradiente radial

La transición parte de un punto central (por defecto, el centro del elemento) y se expande hacia los bordes:

/* Círculo azul en el centro sobre fondo oscuro */
background: radial-gradient(circle, #3b82f6, #1e1b4b);

/* Elipse con parada de color al 40% */
background: radial-gradient(ellipse, #fbbf24 0%, #f97316 40%, transparent 70%);

Puedes desplazar el centro con at x y: radial-gradient(circle at 20% 80%, #ec4899, #8b5cf6).

conic-gradient: gradiente cónico

La transición rota alrededor de un punto, como las agujas de un reloj. Es ideal para crear gráficos de tarta o efectos de ángulo:

/* Ruleta de colores */
background: conic-gradient(red, yellow, green, cyan, blue, magenta, red);

/* Gráfico de tarta: 60% azul, 40% naranja */
background: conic-gradient(#3b82f6 0% 60%, #f97316 60% 100%);

Paradas de color y transparencias

Puedes controlar exactamente dónde empieza y termina cada color añadiendo un porcentaje o longitud tras el color:

/* El azul ocupa el 30% inicial, luego transición hasta el morado */
background: linear-gradient(to right, #3b82f6 30%, #8b5cf6 70%);

/* Franjas duras (sin transición) */
background: linear-gradient(to right, #3b82f6 50%, #8b5cf6 50%);

/* Transparente a color (para superponer sobre imagen) */
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);

Gradientes con múltiples capas

background acepta varias funciones separadas por comas. Las capas se apilan de arriba a abajo:

background:
  linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.1)),
  url('imagen.jpg') center/cover;

Esto pone un oscurecimiento semitransparente sobre una imagen de fondo, técnica habitual en heroes y cabeceras de portada.

Compatibilidad con el resto de propiedades de color

Los gradientes funcionan bien combinados con una paleta de colores coherente. Si trabajas con sistemas de diseño, conviene definir los colores en variables CSS y referenciarlos en el gradiente:

:root {
  --color-primario: #3b82f6;
  --color-secundario: #8b5cf6;
}

.boton {
  background: linear-gradient(to right, var(--color-primario), var(--color-secundario));
}

Para asegurar que el texto sobre el gradiente tiene contraste WCAG suficiente, mide el contraste sobre el color más claro del gradiente: es el punto de menor contraste.

Errores comunes

• Usar background-color en vez de background-image: los gradientes son imágenes CSS, así que background-color: linear-gradient(...) no funciona. Usa background: linear-gradient(...) (que es atajo de background-image).
• Prefijos de navegador obsoletos: -webkit-linear-gradient ya no es necesario en navegadores modernos. Todos los principales navegadores soportan la sintaxis estándar desde 2012.
• Confundir grados y palabras clave: linear-gradient(to right, ...) y linear-gradient(90deg, ...) producen el mismo resultado, pero mezclarlos puede causar confusión. Elige uno y sé consistente.
• Texto ilegible sobre gradientes: el color del texto puede contrastar bien en un extremo del gradiente y mal en el otro. Comprueba el contraste WCAG en ambos extremos.