Degradados CSS
Los colores sólidos y las fotos cubren muchos fondos. A veces quieres una mezcla suave entre colores — un banner calmado, una tarjeta con brillo, un cielo sin un archivo enorme. Esa mezcla es un degradado, que CSS dibuja como un tipo especial de background-image.
¿Qué es un degradado CSS?
Un degradado es una imagen que el navegador genera — no un JPG que descargas. Lo describes con funciones como linear-gradient() y radial-gradient(), y lo pones en background-image (o el atajo background). El resultado se pinta detrás del contenido como un fondo fotográfico.
Tipos de un vistazo
Empieza con estos dos. Los cónicos pueden esperar.
📊 Tipos cotidianos de degradado CSS
| Tipo | Función | Uso cotidiano |
|---|---|---|
| Lineal | linear-gradient(…) |
Banners, botones, lavados de sección izq→der o arriba→abajo |
| Radial | radial-gradient(…) |
Tarjetas con foco suave, fundidos circulares desde el centro |
| Palabras de dirección | to right, to bottom |
Dirección lineal legible sin ángulos |
| Ángulo | 45deg, 90deg |
Inclinación precisa cuando las palabras no bastan |
| Paradas de color | teal 0%, navy 100% |
Dónde se sienta cada color en la mezcla |
Lineal: dos colores, de izquierda a derecha
El lineal más simple necesita una dirección y al menos dos colores. CSS mezcla entre ellos.
Degradado lineal simple izq→der
css.banner {
background-image: linear-gradient(to right, #0f766e, #0f172a);
color: #f8fafc;
padding: 2rem;
}Leer la función
to right es la dirección. #0f766e empieza; #0f172a termina. El navegador rellena el medio.
Ángulos y más paradas
Usa un ángulo para un lavado diagonal y añade paradas intermedias para una mezcla más rica.
Lineal en ángulo con tres paradas
css.hero {
background-image: linear-gradient(
135deg,
#0f766e 0%,
#134e4a 45%,
#0f172a 100%
);
color: white;
min-height: 10rem;
padding: 2rem;
}Hábito de parada
Una parada de color es «este color aquí». Los porcentajes se leen fácil. Puedes omitir posiciones y el navegador reparte por igual.
Radial: fundido desde el centro
radial-gradient() se extiende desde un centro — útil para tarjetas suaves y brillos de foco.
Tarjeta radial suave
css.card {
background-image: radial-gradient(circle at center, #ccfbf1, #0f766e);
color: #042f2e;
padding: 1.5rem;
}Consejo del círculo
circle at center mantiene la forma redonda y centrada. Luego at top o at 20% 30% para un foco en otro sitio.
Los degradados viven en background-image
No pongas una función degradado en color — esa propiedad pinta texto. Los degradados son imágenes de fondo; el contraste del texto sigue importando.
Atajo con color de respaldo
css.panel {
background: #0f172a linear-gradient(to bottom, #115e59, #0f172a);
color: #ecfdf5;
padding: 1.5rem;
}Pruébalo tú
.bannerconlinear-gradient(to right, #0f766e, #0f172a)y texto claro.- Cambia la dirección a
to bottom— el eje de la mezcla voltea. .herocon135degy tres paradas (teal → medio → navy)..cardconradial-gradient(circle at center, #ccfbf1, #0f766e).- Opcional: color sólido de respaldo antes del degradado en el atajo
background.
Errores frecuentes
- Escribir
color: linear-gradient(…)— el degradado no es color de texto - Solo una parada de color — hacen falta al menos dos colores para mezclar
- Olvidar que es
background-image(contraste y capas siguen aplicando) - Arcoíris ruidoso en cada sección — lavados suaves de dos o tres paradas se leen más profesionales
- Esperar que el degradado sustituya fotos con significado (productos siguen siendo imágenes reales)
Resumen
- Los degradados son imágenes generadas por el navegador para fondos
linear-gradient()mezcla en una línea;radial-gradient()desde un centro- Palabras de dirección, ángulos y paradas controlan el aspecto
- Conéctalos con
background-imageo el atajobackground - Mantén fuerte el contraste del texto encima
- Practica un banner lineal y una tarjeta radial antes de trucos más densos
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior