Texto degradado en Tailwind: clases, sintaxis v4 y soluciones

Para crear texto degradado en Tailwind, pon un degradado en el elemento y recórtalo a las letras: bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent. La primera parte pinta un fondo degradado, bg-clip-text recorta ese fondo a la forma de los glifos y text-transparent elimina el color sólido del texto para que se vea el degradado. En Tailwind v3, escribe bg-gradient-to-r en lugar de bg-linear-to-r; el resto es idéntico.

<h1 class="bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-5xl font-bold text-transparent">
  Ship the quiet version
</h1>

Cómo funcionan juntas las clases

Conviene saber en qué se compila cada utilidad, porque todos los fallos del texto degradado vienen de que falta una de las cuatro partes. Por dentro es la misma técnica que el texto degradado en CSS normal: background-clip: text con un relleno transparente.

Las direcciones siguen los sufijos habituales: -to-r, -to-br, -to-b y demás. La versión 4 también acepta un ángulo, como bg-linear-45 o bg-linear-135, y añade bg-radial y bg-conic, que también funcionan con texto. Si no has usado mucho las utilidades de degradado, degradados en Tailwind cubre los fondos en profundidad.

Nombres de clase en Tailwind v4 y v3

El mayor cambio de v4 es el nombre de la utilidad lineal. bg-gradient-to-r pasó a ser bg-linear-to-r, para convivir con las nuevas utilidades radial y cónica. El nombre antiguo sigue compilando en v4 por compatibilidad, pero el código nuevo debería usar el nuevo.

Ejemplos de texto degradado para copiar

Tres o cuatro colores cercanos en el círculo cromático dan el texto degradado más limpio. Los opuestos resultan estridentes y pueden volverse grises en el centro. Estas combinaciones usan colores de la paleta por defecto, descrita en colores de Tailwind.

Las posiciones de las paradas mueven dónde queda cada color. from-20% via-50% to-80% mantiene color sólido en los dos extremos de un titular largo, lo que se ve más sereno que una mezcla que empieza en la primera letra.

<!-- Stop positions -->
<h2 class="bg-linear-to-r from-cyan-600 from-20% via-blue-600 via-50% to-violet-600 to-80% bg-clip-text text-transparent">
  Plans for every team
</h2>

<!-- OKLCH interpolation keeps the middle bright -->
<h2 class="bg-linear-to-r/oklch from-blue-600 to-yellow-400 bg-clip-text text-transparent">
  Brighter in the middle
</h2>

<!-- Arbitrary gradient, underscores stand in for spaces -->
<h2 class="bg-[linear-gradient(100deg,#1e1b4b_0%,#7c3aed_60%,#f472b6_100%)] bg-clip-text text-transparent">
  Exactly your colours
</h2>

Del azul al amarillo es una buena prueba de interpolación. Mezclado en sRGB pasa por un verde grisáceo; mezclado en OKLCH se mantiene vivo. Degradados CSS en OKLCH explica por qué.

Cómo arreglar los problemas habituales del texto degradado

Titulares de varias líneas

Por defecto, el degradado abarca toda la caja del elemento, así que un titular que salta de línea recibe un único degradado estirado y la segunda línea queda de otro color que la primera. Añade box-decoration-clone para dar a cada línea su propio degradado completo, o inline-block para ajustar la caja al texto.

Descendentes recortados

Un interlineado ajustado como leading-none puede cortar la parte inferior de una g o una y, porque el fondo termina en la caja de línea. Añade pb-1 o afloja un poco el interlineado.

Modo oscuro

Un degradado pensado para papel blanco se ve apagado sobre una página oscura. Dale sus propios tonos con variantes: from-violet-600 to-pink-600 dark:from-violet-300 dark:to-pink-300. La misma idea se aplica a los fondos, como se explica en degradados para modo oscuro.

Cómo animar texto degradado en Tailwind

Un brillo lento se consigue con un fondo el doble de ancho que el texto que se desliza de lado. En v4, define la animación dentro de @theme y se convierte en una utilidad animate-*.

@import "tailwindcss";

@theme {
  --animate-shine: shine 6s linear infinite;

  @keyframes shine {
    to { background-position: 200% center; }
  }
}

Úsalo una vez por página como mucho. El movimiento atrae la mirada, que es justo lo que buscas en un titular de lanzamiento y una molestia en cualquier otro sitio. El patrón es el mismo que se usa en los degradados CSS animados.

Mantén legible el texto degradado

1. 1

   Encuentra la parada más débil

   El color más claro sobre una página clara, o el más oscuro sobre una oscura, marca el contraste que obtienes de verdad.

2. 2

   Pruébalo como texto normal

   Los titulares grandes en negrita necesitan al menos 3:1 frente a la página según las WCAG. Contraste de color y accesibilidad tiene las reglas completas.

3. 3

   Usa el peso

   Los degradados se leen mejor en pesos bold y heavy, donde hay más relleno para mostrar el color.

4. 4

   Quédate en unas pocas palabras

   Un titular o una palabra destacada. Cualquier cosa más larga empieza a parecer un error de renderizado.

El texto degradado es una técnica web. Cuando el trabajo es una publicación en redes o un banner y prefieres el degradado detrás de las palabras, los Marks de Gradiently mueven su zona más tranquila detrás del texto y eligen tinta clara u oscura en cada línea, así que las palabras se leen sin que tengas que probar cada parada.