# Texto degradado en Tailwind: clases, sintaxis v4 y soluciones
[Canonical HTML page](https://gradiently.design/es/guide/tailwind-gradient-text)
Cuatro utilidades convierten un titular en texto degradado. Los detalles que las rodean deciden si se ve nítido o recortado. Aquí tienes las clases para Tailwind v4 y v3, y los problemas con los que te vas a topar.
## The short version
- El texto degradado en Tailwind necesita un fondo degradado, `bg-clip-text` para recortarlo a las letras y `text-transparent` para que el fondo se vea a través.
- En Tailwind v4 la utilidad de degradado es `bg-linear-to-r`, mientras que v3 usa `bg-gradient-to-r`; las clases de color from, via y to funcionan igual en ambas.
- Tailwind v4 te deja elegir el espacio de interpolación con un modificador como `bg-linear-to-r/oklch`, que mantiene luminoso el punto medio de un degradado.
- Añade `box-decoration-clone` cuando un titular degradado ocupa varias líneas, y un poco de padding inferior cuando se cortan los trazos descendentes.
- Comprueba el contraste del color más claro del degradado frente a la página, porque ahí es donde el texto degradado se vuelve difícil de leer.
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.
```html
Ship the quiet version
```
Todo el efecto en una lista de clases. El orden dentro del atributo class no importa.
## 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](https://gradiently.design/es/guide/css-gradient-text) normal: `background-clip: text` con un relleno transparente.
| Utilidad | Qué define | Si la olvidas |
| --- | --- | --- |
| `bg-linear-to-r` | Un degradado lineal hacia la derecha | No hay degradado |
| `from-*` `via-*` `to-*` | Las paradas de color | Paradas transparentes o por defecto |
| `bg-clip-text` | `background-clip: text` | Una caja de color detrás de un texto sólido |
| `text-transparent` | `color: transparent` | El texto sólido tapa el degradado |
Las cuatro partes del texto degradado en Tailwind y el síntoma que deja cada una cuando falta.
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](https://gradiently.design/es/guide/tailwind-gradient) 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.
| Lo que quieres | Tailwind v4 | Tailwind v3 |
| --- | --- | --- |
| De izquierda a derecha | `bg-linear-to-r` | `bg-gradient-to-r` |
| Diagonal | `bg-linear-to-br` o `bg-linear-45` | `bg-gradient-to-br` |
| Radial | `bg-radial` | Solo con valor arbitrario |
| Cónico | `bg-conic` | Solo con valor arbitrario |
| Mezcla en OKLCH | `bg-linear-to-r/oklch` | No disponible |
| Recorte al texto | `bg-clip-text` | `bg-clip-text` |
Lado a lado, para que sepas para qué versión se escribió un fragmento que encontraste en internet.
## 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](https://gradiently.design/es/guide/tailwind-colors).
- violet-600 / pink-600: `linear-gradient(90deg, #7c3aed 0%, #db2777 100%)`
- cyan-600 / blue-600 / violet-600: `linear-gradient(90deg, #0891b2 0%, #2563eb 50%, #7c3aed 100%)`
- orange-600 / rose-600: `linear-gradient(90deg, #ea580c 0%, #e11d48 100%)`
- emerald-600 / teal-600 / cyan-600: `linear-gradient(90deg, #059669 0%, #0d9488 50%, #0891b2 100%)`
- amber-500 / orange-500 / pink-600: `linear-gradient(90deg, #f59e0b 0%, #f97316 50%, #db2777 100%)`
- slate-800 / slate-500: `linear-gradient(90deg, #1e293b 0%, #64748b 100%)`
Cada etiqueta enumera las paradas en orden: la primera va en `from-*`, la del medio en `via-*` y la última en `to-*`. Los tonos 600 mantienen suficiente contraste sobre una página blanca; sobre una oscura, cambia a 300 o 400. Los valores hex son de la paleta de v3; las versiones OKLCH de v4 se ven muy parecidas.
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.
```html
Plans for every team
Brighter in the middle
Exactly your colours
```
Posiciones de parada, un modificador de interpolación y un degradado totalmente personalizado. Los valores arbitrarios funcionan en v3 y en v4.
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](https://gradiently.design/es/guide/css-gradient-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](https://gradiently.design/es/guide/dark-mode-gradients).
### Evita
- Texto degradado en párrafos largos
- Una parada pálida que desaparece sobre blanco
- Colores complementarios con un centro gris
- Texto degradado encima de un fondo degradado
- Olvidar un color sólido para el texto seleccionado
### Haz
- Resérvalo para un titular o una sola palabra
- Comprueba la parada más clara frente a la página
- Tonos vecinos, o interpolación en OKLCH
- Fondo sólido detrás de las palabras degradadas
- Define `selection:text-white selection:bg-violet-600`
## 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-*`.
```css
@import "tailwindcss";
@theme {
--animate-shine: shine 6s linear infinite;
@keyframes shine {
to { background-position: 200% center; }
}
}
```
Después añade `bg-size-[200%_auto] animate-shine motion-reduce:animate-none` al titular, y repite el primer color como última parada para que el bucle no dé saltos.
Ú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](https://gradiently.design/es/guide/css-animated-gradient).
## Mantén legible el texto degradado
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. **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](https://gradiently.design/es/guide/color-contrast-accessibility) tiene las reglas completas.
3. **Usa el peso** Los degradados se leen mejor en pesos bold y heavy, donde hay más relleno para mostrar el color.
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.
## FAQ
### ¿Cómo hago texto degradado en Tailwind?
Añade un degradado con `bg-linear-to-r` (o `bg-gradient-to-r` en v3), paradas de color con `from-*` y `to-*`, y después `bg-clip-text` y `text-transparent`.
### ¿Por qué no se ve mi texto degradado en Tailwind?
Normalmente falta `text-transparent`, así que el texto sólido tapa el degradado, o falta `bg-clip-text`, así que el degradado rellena una caja detrás de las palabras. Comprueba que las cuatro partes están en el mismo elemento.
### ¿Qué sustituye a bg-gradient-to-r en Tailwind v4?
La utilidad lineal ahora es `bg-linear-to-r`. El nombre antiguo sigue funcionando por compatibilidad, y v4 añade `bg-radial`, `bg-conic` y utilidades de ángulo como `bg-linear-45`.
### ¿Cómo evito que el texto degradado corte letras como la g y la y?
Añade un poco de padding inferior, como `pb-1`, o afloja el interlineado, porque el fondo recortado termina en la caja de línea.
### ¿El texto degradado es accesible?
Puede serlo, si todas las partes del degradado cumplen los requisitos de contraste frente a la página. Prueba la parada más clara y reserva el texto degradado para los titulares.