Los gradientes CSS permiten crear transiciones suaves de color sin imágenes, directamente con código. Son ligeros, escalan perfectos y se usan en fondos, botones, tarjetas y efectos modernos. Esta guía cubre los tres tipos con ejemplos.
Qué es un gradiente CSS
Un gradiente es una transición gradual entre dos o más colores. En CSS se genera con funciones que se usan como imagen de fondo (background-image o background), así que no necesitas archivos: todo es código que el navegador dibuja.
Gradiente lineal (linear-gradient)
El más común: los colores fluyen en línea recta, en una dirección.
background: linear-gradient(to right, #3b82f6, #8b5cf6);
- Dirección: puedes usar palabras (
to right,to bottom) o un ángulo (90deg,45deg).0deges hacia arriba,90dega la derecha. - Varios colores: añade cuantos quieras separados por comas.
background: linear-gradient(45deg, #f59e0b, #ef4444, #8b5cf6);
Gradiente radial (radial-gradient)
Los colores irradian desde un punto central hacia fuera, en círculo o elipse.
background: radial-gradient(circle, #3b82f6, #1e293b);
Útil para focos de luz, viñetas o fondos con profundidad. Puedes controlar la forma (circle/ellipse) y la posición del centro (at top left).
Gradiente cónico (conic-gradient)
Los colores giran alrededor de un punto, como las agujas de un reloj. Perfecto para ruedas de color, gráficos de tarta o efectos circulares.
background: conic-gradient(from 0deg, #ef4444, #f59e0b, #10b981, #ef4444);
Paradas de color (color stops)
Puedes controlar dónde ocurre cada color añadiendo un porcentaje:
background: linear-gradient(to right, #3b82f6 0%, #3b82f6 40%, #8b5cf6 100%);
Aquí el azul ocupa el primer 40% y luego transiciona. Si pones dos colores en la misma posición, creas una transición dura (bandas sólidas en vez de degradado).
Transparencia en gradientes
Usa colores con alpha (rgba o HEX de 8 dígitos) para gradientes que se desvanecen, ideales para superponer texto sobre imágenes:
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
Crear estos gradientes a mano, ajustando ángulos y paradas, es lento. Puedes hacerlo visualmente con el generador de gradientes CSS de esta web y copiar el código listo.
Consejos prácticos
- Suaviza con colores cercanos en el tono para gradientes elegantes; colores muy opuestos pueden quedar estridentes.
- Gradientes sobre texto: combina
background-clip: textpara texto con degradado. - Rendimiento: los gradientes son ligeros, pero animarlos es costoso; anima
opacityotransformen su lugar.
Preguntas frecuentes
¿Los gradientes funcionan en todos los navegadores? linear y radial sí, ampliamente. conic-gradient tiene buen soporte moderno pero comprueba si necesitas navegadores muy antiguos.
¿Puedo animar un gradiente? No directamente de forma eficiente; el truco habitual es animar la background-position de un gradiente grande.
¿Cuántos colores puedo poner? Los que quieras, pero con 2-4 suele bastar para un resultado limpio.
¿Se suben mis datos? No, si usas un generador local. Todo ocurre en tu navegador.
Crea gradientes lineales, radiales y cónicos visualmente con el generador de gradientes CSS gratis y copia el código al instante.