Texto con degradado en CSS, bien hecho

El texto con degradado en CSS se hace pintando un degradado como fondo del elemento de texto, recortando ese fondo con la forma de las letras mediante background-clip: text y haciendo transparente el propio texto para que se vea el degradado. Lleva tres declaraciones, funciona en todos los navegadores actuales y sigue siendo texto real, seleccionable y que se puede buscar, no una imagen.

.gradient-text {
  background-image: linear-gradient(90deg, #6d28d9, #be185d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

El resto de esta guía trata de lo que hace mal la versión de tres líneas: alternativas que faltan, contraste, texto en varias líneas, descendentes recortados y la cuestión de diseño de cuándo ayuda siquiera el texto con degradado. Para el aspecto de las letras con degradado en redes y trabajo de marca, no en la web, mira los efectos de texto.

Una receta robusta de texto con degradado con alternativas

Si un navegador aplica color: transparent pero no el recorte, el texto desaparece. Protégete: dale al elemento un color liso sacado del degradado y pasa a la versión transparente solo cuando el navegador confirme que la admite. Añade un restablecimiento para el modo de colores forzados, donde el sistema sustituye tus colores y el texto debe seguir visible.

.gradient-text {
  color: #6d28d9; /* solid fallback from the gradient */
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(90deg, #6d28d9, #be185d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .gradient-text {
    background: none;
    color: CanvasText;
  }
}

La página de MDN sobre background-clip documenta el valor text y su compatibilidad actual.

Contraste: comprueba los dos extremos del degradado

Un comprobador de contraste toma un solo color de texto, pero el texto con degradado tiene muchos. Las palabras son tan legibles como su parte más débil, así que comprueba el punto más claro y el más oscuro frente al fondo, y mira también el medio, porque una mezcla sRGB puede quedar más clara o más apagada que cualquiera de los extremos. Para texto grande de titular, WCAG pide al menos 3:1; para texto normal, 4,5:1. El contraste de color explica las relaciones.

Arreglar el texto con degradado en varias líneas y las letras recortadas

En un elemento en línea que se parte, el navegador extiende un solo fondo por todas las líneas como si fueran una única tira, así que la primera línea recibe el comienzo del degradado y la última el final. Normalmente quieres que cada línea lleve el degradado completo. box-decoration-break: clone lo consigue. En elementos de bloque, como un título, el degradado ya abarca toda la caja, así que un degradado largo en un título ancho puede mostrar solo su parte central en las líneas cortas.

.gradient-text {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* stop descenders being cut off */
  line-height: 1.15;
  padding-block-end: 0.08em;
}

Los descendentes recortados son la otra sorpresa. El fondo solo pinta la caja del elemento, así que con un line-height muy ajustado, las partes de las letras que cuelgan por debajo quedan transparentes y desaparecen. Una altura de línea de aproximadamente 1,1 o un poco de padding inferior lo arregla. Las tipografías de titular en cursiva pueden perder la punta de su última letra por la derecha por el mismo motivo; un toque de padding en línea ayuda.

Cuándo funciona el texto con degradado y cuándo no

Una buena regla: el texto con degradado es un acento, como la cursiva. Una palabra resaltada en un titular llama la atención; un párrafo entero de ello la cansa. Los pesos gruesos ayudan, porque los trazos finos no muestran suficiente color para leerse como degradado. Si el resto de la página ya usa fondos degradados, la tipografía plana suele ser la opción más fuerte; el texto sobre fondos degradados cubre ese caso.

Animar el texto con degradado

Para que el color fluya por las letras, haz el fondo más grande que el texto y muévelo. Dale un 200% de ancho y anima background-position de ida y vuelta con alternate, para que nunca haya un salto cuando el bucle se reinicia. Respeta los ajustes de movimiento reducido y mantenlo lento: un destello cada pocos segundos se lee como acabado cuidado, un ciclo rápido se lee como una advertencia.

.gradient-text--flow {
  background-image: linear-gradient(90deg, #6d28d9, #be185d, #c2410c);
  background-size: 200% 100%;
  animation: flow 6s ease-in-out infinite alternate;
}

@keyframes flow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text--flow { animation: none; }
}

Los mismos trucos de fondo dan vida a los degradados animados en CSS en general, y los contornos con degradado, en lugar de rellenos, se tratan en los bordes con degradado en CSS.