Degradados en CSS

Un degradado es una transición suave entre dos o más colores. En CSS no necesitas un programa de diseño ni una imagen: escribes una función y el navegador dibuja el degradado al tamaño exacto de la caja, sin peso de descarga y nítido en cualquier pantalla. En esta lección vas a dominar los tres tipos (lineal, radial y cónico), sus versiones repetidas, las paradas de color y una colección de usos reales: capas sobre fotos, patrones, texto y bordes degradados.

En bordes y sombras viste los degradados por encima. Aquí los vemos a fondo.

Un degradado es una imagen

Lo más importante que debes saber: para CSS, un degradado es una imagen generada por el navegador. Por eso va en background-image (o en el atajo background), igual que una url():

.cabecera { background-image: linear-gradient(#0f766e, #1d4ed8); }  /* bien */
.cabecera { background: linear-gradient(#0f766e, #1d4ed8); }        /* bien */
.cabecera { background-color: linear-gradient(#0f766e, #1d4ed8); }  /* no hace nada */

Como es una imagen, se comporta como tal: puedes darle tamaño con background-size, repetirla, posicionarla y apilarla con otras. Y como no tiene tamaño propio, ocupa toda la caja del elemento.

linear-gradient(): en línea recta

La forma más simple lleva dos colores y va de arriba abajo:

.a { background: linear-gradient(#fde68a, #f97316); }

Dirección con palabras o con ángulos

Delante de los colores puedes indicar hacia dónde va:

.b { background: linear-gradient(to right, #fde68a, #f97316); }
.c { background: linear-gradient(to top left, #fde68a, #f97316); }
.d { background: linear-gradient(45deg, #fde68a, #f97316); }

Con palabras dices hacia dónde va el degradado (to right: termina a la derecha). Con ángulos, piensa en las agujas de un reloj:

Ángulo	Equivale a	El degradado va…
0deg	to top	De abajo hacia arriba
90deg	to right	De izquierda a derecha
180deg	to bottom	De arriba abajo (por defecto)
270deg	to left	De derecha a izquierda

También valen las vueltas: 0.25turn es lo mismo que 90deg.

Hay una diferencia sutil entre to top right y 45deg: con la palabra, el degradado apunta exactamente a la esquina, sea cual sea la forma de la caja. Con 45deg el ángulo es fijo, y en una caja muy apaisada no llegará a la esquina.

Varios colores

Puedes poner todos los colores que quieras. Si no dices nada, se reparten a partes iguales:

.arcoiris {
  background: linear-gradient(to right, #ef4444, #f59e0b, #eab308, #22c55e, #3b82f6);
}

Paradas de color

Una parada de color es un color con una posición: el punto exacto donde el degradado alcanza ese color.

.atardecer {
  background: linear-gradient(#1e3a8a 0%, #9333ea 40%, #f97316 80%, #fde68a 100%);
}

Entre 0 % y 40 % pasa del azul al morado; entre 40 % y 80 %, del morado al naranja; y así. También puedes usar píxeles o cualquier otra unidad: #9333ea 120px.

Cambios bruscos: dos colores en la misma posición

Si un color termina justo donde empieza el siguiente, no hay transición: aparece una línea nítida. Es el truco para dibujar bandas y barras:

.progreso {
  /* 65 % completado, sin difuminar */
  background: linear-gradient(to right, #22c55e 65%, #e5e7eb 65%);
}

Cada color puede llevar dos posiciones, el inicio y el final de su banda. Esto hace lo mismo con menos repetición:

.bandera {
  background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%);
}

Consejo: si una posición es menor que la anterior, el navegador la sube hasta igualarla. Por eso verás #f1bf00 0 justo después de una parada: significa “empieza aquí mismo”.

Pistas de color

Entre dos colores puedes poner solo un porcentaje, sin color. Es una pista: indica dónde está el punto medio de la mezcla.

.foco { background: linear-gradient(to right, #1d4ed8, 20%, #e0f2fe); }

El tono intermedio aparece al 20 % en vez de al 50 %, así que el azul se aclara muy rápido.

Transparencias

Los degradados con transparencia son los más útiles en la práctica. Los usarás sobre todo para que un texto se lea encima de una foto:

.tarjeta-ruta {
  background:
    linear-gradient(to top, rgb(0 0 0 / 0.75), transparent 60%),
    url("img/lagos.jpg") center / cover;
  color: white;
}

El negro semitransparente abajo y transparente arriba oscurece solo la parte donde va el texto, y la foto se sigue viendo bien.

transparent es un color más. Los navegadores actuales mezclan bien desde y hacia transparent, sin las franjas grisáceas que verás mencionadas en tutoriales antiguos.

Varios fondos superpuestos

background acepta varias capas separadas por comas, y la primera queda encima. Combinando degradados se consiguen efectos muy ricos sin una sola imagen:

.portada {
  background:
    radial-gradient(circle at 15% 20%, rgb(255 255 255 / 0.3), transparent 30%),
    radial-gradient(circle at 85% 80%, rgb(236 72 153 / 0.5), transparent 40%),
    linear-gradient(135deg, #1e3a8a, #7c3aed);
}

Dos “brillos” circulares encima de un degradado de fondo. Cada capa puede tener su propio tamaño y posición: background-size: 100% 100%, 40px 40px, auto;.

radial-gradient(): desde un punto

Parte de un centro y se expande hacia fuera:

.a { background: radial-gradient(#fde68a, #f97316); }                 /* elipse, centrada */
.b { background: radial-gradient(circle, #fde68a, #f97316); }         /* círculo */
.c { background: radial-gradient(circle at top left, #fde68a, #f97316); }
.d { background: radial-gradient(circle 80px at 30% 40%, #fde68a, transparent); }

• La forma es ellipse (por defecto, se adapta a la caja) o circle.
• Con at eliges el centro, con palabras o porcentajes.
• El tamaño puede ser una medida (80px) o una palabra: closest-side, closest-corner, farthest-side o farthest-corner (por defecto, llega hasta la esquina más lejana).

Un uso clásico es el viñeteado: bordes oscuros que concentran la mirada en el centro.

.vineta {
  background: radial-gradient(ellipse at center, transparent 50%, rgb(0 0 0 / 0.6));
}

conic-gradient(): alrededor de un punto

Los colores giran alrededor del centro, como las agujas del reloj. Las posiciones pueden ir en porcentajes o en grados:

.tarta {
  width: 140px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #3b82f6 0 50%,      /* 50 % cardio */
    #f59e0b 50% 80%,    /* 30 % fuerza */
    #10b981 80% 100%    /* 20 % estiramientos */
  );
}
.rueda { background: conic-gradient(from 90deg at 50% 50%, red, yellow, lime, aqua, blue, magenta, red); }

from indica el ángulo de inicio (por defecto, arriba) y at, el centro. Con un radial-gradient encima en forma de agujero tienes un gráfico de donut.

Degradados repetidos

repeating-linear-gradient(), repeating-radial-gradient() y repeating-conic-gradient() repiten las paradas una y otra vez hasta llenar la caja:

.obras {
  /* bandas amarillas y negras de 15px, en diagonal */
  background: repeating-linear-gradient(-45deg, #facc15 0 15px, #111827 15px 30px);
}
.diana {
  background: repeating-radial-gradient(circle, #ef4444 0 10px, white 10px 20px);
}

La última posición (aquí 30px y 20px) marca el tamaño del dibujo que se repite.

Patrones sin imágenes

Combinando degradados con background-size se dibujan patrones que antes requerían una imagen:

/* Cuadrícula de libreta */
.libreta {
  background:
    linear-gradient(#e2e8f0 1px, transparent 1px),
    linear-gradient(90deg, #e2e8f0 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Tablero de ajedrez */
.tablero {
  background: repeating-conic-gradient(#334155 0 25%, #f8fafc 0 50%) 0 0 / 40px 40px;
}

/* Lunares */
.lunares {
  background: radial-gradient(circle, #ec4899 3px, transparent 4px) 0 0 / 18px 18px;
}

En la cuadrícula, cada degradado dibuja una línea de 1px en una dirección, y background-size hace que la imagen se repita cada 20px. En los lunares, dejar 1px entre el color y transparent (3px y 4px) suaviza el borde del círculo.

Texto con degradado

Recortas el fondo con la forma de las letras y haces el texto transparente para que se vea:

.titulo-degradado {
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  -webkit-background-clip: text;   /* para navegadores algo antiguos */
  background-clip: text;
  color: transparent;
}

Si el título ocupa todo el ancho pero el texto es corto, el degradado se reparte por toda la caja y solo verás una parte. Añade display: inline-block o width: fit-content para que la caja mida lo que el texto.

Cuidado: comprueba el contraste en los dos extremos del degradado. Si uno de los colores es muy claro sobre fondo blanco, esa parte del texto será ilegible.

Bordes con degradado

border-color no admite degradados. Hay dos técnicas.

Con dos fondos (respeta border-radius): un fondo liso que llega hasta el borde por dentro y el degradado que ocupa también la zona del borde.

.tarjeta-pro {
  border: 3px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #e11d48, #7c3aed) border-box;
}

padding-box y border-box indican hasta dónde llega cada capa (es la propiedad background-clip dentro del atajo). El borde transparente deja ver el degradado de debajo.

Con border-image: más corta, pero ignora border-radius, así que solo sirve para esquinas rectas.

.aviso { border: 4px solid; border-image: linear-gradient(to right, #f59e0b, #ef4444) 1; }

Novedad: elegir cómo se mezclan los colores

Por defecto, el navegador mezcla los colores en el espacio sRGB, y algunos degradados se ven apagados por el centro (de azul a amarillo sale un gris). Los navegadores actuales permiten elegir otro espacio de color:

.vivo { background: linear-gradient(in oklch to right, #3b82f6, #facc15); }

oklch mantiene la intensidad durante toda la transición. Funciona en Chrome, Edge, Safari y Firefox recientes; en uno antiguo la regla se ignora, así que puedes escribir antes una versión normal como respaldo.

Errores frecuentes

• Ponerlo en background-color. Un degradado es una imagen: usa background o background-image.
• El degradado se repite en franjas en el <body>. Si la página es corta, el <body> mide poco y el degradado se repite. Añade min-height: 100vh o background-attachment: fixed.
• Pensar que 0deg va hacia la derecha. En CSS, 0deg apunta hacia arriba y los ángulos giran como las agujas del reloj, no como en las matemáticas del instituto. Hacia la derecha es 90deg.
• Esperar que border-image respete las esquinas redondeadas. No lo hace; usa la técnica de los dos fondos.
• Texto degradado ilegible. Revisa el contraste de todos los colores del degradado y deja un color de respaldo si quitas el degradado en algún caso.
• Intentar animarlo con transition. El navegador no sabe animar de un degradado a otro y cambia de golpe. Anima background-position de un degradado grande o la opacity de una capa encima.

Resumen

Función o técnica	Para qué	Ejemplo
linear-gradient()	Degradado en línea recta	linear-gradient(135deg, a, b)
radial-gradient()	Desde un punto hacia fuera	radial-gradient(circle at top, a, b)
conic-gradient()	Girando alrededor de un punto	Gráficos de tarta
repeating-*-gradient()	Repite las paradas	Rayas, dianas
Parada de color	Dónde llega cada color	#22c55e 65%
Dos colores en la misma posición	Cambio brusco	a 50%, b 50%
Varias capas	Superponer degradados e imágenes	background: capa1, capa2
background-size	Repetir un dibujo pequeño	Cuadrícula, lunares
background-clip: text	Texto degradado	Con color: transparent
padding-box / border-box	Borde degradado con esquinas redondeadas	Dos fondos

Ya dominas el color y los fondos. Ahora toca el texto: sigue con tipografía.