Un gradiente CSS es una imagen que el navegador dibuja por ti, mezclando suavemente dos o más colores. Como se genera a partir de una fórmula, no tiene tamaño de archivo, se adapta a cualquier resolución y puede cambiarse con una sola línea de código. Los gradientes se usan en fondos, botones, capas sobre fotos, barras de progreso e incluso gráficos sencillos. CSS ofrece tres tipos, y comparten el mismo vocabulario básico.
Paradas de color
Todo gradiente se define con una lista de paradas de color. Una parada es un color, seguido opcionalmente de una posición sobre la línea del gradiente:
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
Si omites las posiciones, el navegador reparte los colores de manera uniforme. Con tres colores y sin posiciones, quedan en 0, 50 y 100 por ciento. Las posiciones pueden ser porcentajes o longitudes como 40px.
Gradientes lineales
Un gradiente lineal hace la transición a lo largo de una línea recta. El primer valor define la dirección, como un ángulo o como una palabra clave.
background: linear-gradient(to right, #0ea5e9, #22c55e);
background: linear-gradient(135deg, #f97316, #db2777);
Los ángulos funcionan como una brújula: 0deg apunta hacia arriba, 90deg hacia la derecha, 180deg hacia abajo y 270deg hacia la izquierda. Si omites la dirección, el valor por defecto es to bottom, equivalente a 180deg. Las palabras clave to right, to top left y similares son más amigables pero menos precisas que los grados.
Gradientes radiales
Un gradiente radial se irradia hacia fuera desde un punto central en forma de círculo o elipse.
background: radial-gradient(circle, #fde68a, #f97316);
background: radial-gradient(ellipse at top left, #818cf8, #1e1b4b);
Puedes elegir la forma (circle o ellipse), la posición con at y el tamaño con palabras clave como closest-side y farthest-corner. Los gradientes radiales son excelentes para focos de luz, resplandores detrás de un elemento hero y viñetas sutiles.
Gradientes cónicos
Un gradiente cónico barre los colores alrededor de un punto central, como las manecillas de un reloj. El ángulo empieza arriba y avanza en sentido horario.
background: conic-gradient(from 0deg, #ef4444, #eab308, #22c55e, #3b82f6, #ef4444);
Terminar con el mismo color con el que empezaste crea una rueda sin costuras. Los gradientes cónicos sirven para ruedas de color, anillos de carga y, con paradas duras, gráficos circulares sencillos.
Paradas duras: gradientes sin mezcla
Si dos paradas comparten la misma posición, el color cambia al instante en lugar de mezclarse. Esto convierte un gradiente en un generador de patrones.
/* Dos mitades iguales */
background: linear-gradient(90deg, #111827 50%, #f9fafb 50%);
/* Un gráfico circular: 70 por ciento azul, el resto gris */
background: conic-gradient(#3b82f6 0 70%, #e5e7eb 70% 100%);
Para las rayas, usa las variantes repetidas, que replican el gradiente en mosaico:
background: repeating-linear-gradient(45deg, #fde047 0 10px, #111827 10px 20px);
Transparencia y capas
Los gradientes pueden incluir colores transparentes, lo que permite apilar varios o colocar uno sobre una imagen. Un uso clásico es un degradado oscuro sobre una foto para que el texto blanco siga siendo legible:
background:
linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent),
url("foto.jpg") center / cover;
La primera capa de la lista se dibuja encima. Al desvanecer hacia transparente, en motores antiguos conviene usar una versión transparente del mismo color en lugar de la palabra clave transparent, que puede producir un punto medio grisáceo.
Texto y bordes con gradiente
Combina un fondo con gradiente con background-clip: text y un color de texto transparente para rellenar el texto con un gradiente. Para los bordes, se puede aplicar un gradiente mediante border-image o superponiendo fondos.
Consejos prácticos
- Comprueba el contraste del texto contra todas las partes del gradiente, no solo contra el promedio.
- Evita gradientes entre colores muy separados en la rueda cromática, que pueden volverse apagados en el centro. Añade una parada intermedia para controlar el camino.
- Usa el mismo ángulo en toda la interfaz para un aspecto coherente.
- Incluye un color sólido de respaldo antes de la declaración del gradiente para navegadores muy antiguos.
Diséñalo de forma visual
Es mucho más fácil diseñar gradientes a ojo que editando números. El generador de gradientes CSS te permite elegir el tipo, ajustar el ángulo, añadir hasta seis paradas y copiar el código final. Empieza con dos colores que te gusten, añade un tercero solo si mejora el resultado y mantén el efecto sutil para un acabado profesional.