# Clases de degradado en Tailwind: lineal, radial y cónico en v4
[Canonical HTML page](https://gradiently.design/es/guide/tailwind-gradient)
Tailwind v4 renombró sus utilidades de degradado, añadió ángulos, degradados radiales y cónicos, y cambió la mezcla por defecto a oklab. Aquí tienes el sistema completo, con el CSS que genera cada clase.
## The short version
- En Tailwind CSS v4, los degradados lineales usan bg-linear-to-* para las direcciones y bg-linear-<ángulo> para los ángulos, en lugar de los nombres bg-gradient-to-* de v3.
- Los colores se añaden con las utilidades from-*, via-* y to-*, y sus posiciones con utilidades de porcentaje como from-10% y to-90%.
- Tailwind v4 añade las utilidades bg-radial y bg-conic, con valores arbitrarios para posiciones como bg-radial-[at_25%_25%].
- Los degradados de Tailwind v4 se mezclan en oklab por defecto, y modificadores como /oklch, /srgb y /longer cambian la interpolación.
- Cualquier degradado que Tailwind no pueda expresar con utilidades se puede escribir como valor arbitrario, como bg-linear-[25deg,red_5%,yellow_60%].
Un **degradado en Tailwind** se construye con dos tipos de utilidad: una que fija el tipo y la dirección del degradado, como `bg-linear-to-r`, y utilidades de paradas de color que lo rellenan, como `from-indigo-500 to-pink-500`. En Tailwind CSS v4, las utilidades de dirección pasaron de `bg-gradient-to-*` a `bg-linear-to-*`, los ángulos como `bg-linear-45` se volvieron posibles sin CSS propio, y los degradados radiales y cónicos llegaron como utilidades de primera clase.
```html
```
Un degradado de izquierda a derecha del índigo al rosa. Sin CSS propio.
from-indigo-500 to-pink-500: `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117), oklch(65.6% 0.241 354.308))`
Lo que genera esa lista de clases: `to right in oklab`, con el indigo-500 y el pink-500 por defecto de Tailwind.
Todo lo que hay aquí sigue la [documentación oficial de background-image de Tailwind](https://tailwindcss.com/docs/background-image). Si quieres saber qué hace el CSS generado, la guía del [degradado lineal en CSS](https://gradiently.design/es/guide/css-linear-gradient) explica la función que hay debajo.
## Degradados lineales: direcciones y ángulos
`bg-linear-to-t`, `-tr`, `-r`, `-br`, `-b`, `-bl`, `-l` y `-tl` orientan el degradado hacia un lado o una esquina. Para cualquier otra dirección, usa un ángulo: `bg-linear-45` o `bg-linear-160`. Añade un signo menos delante para los ángulos negativos, como en `-bg-linear-45`.
| Clase | Dirección generada | Sustituye en v3 a |
| --- | --- | --- |
| `bg-linear-to-r` | `to right in oklab` | `bg-gradient-to-r` |
| `bg-linear-to-br` | `to bottom right in oklab` | `bg-gradient-to-br` |
| `bg-linear-45` | `45deg in oklab` | un valor arbitrario |
| `bg-linear-to-b/srgb` | `to bottom in srgb` | la mezcla por defecto de v3 |
| `bg-(image:--brand-gradient)` | `var(--brand-gradient)` como imagen completa | `bg-[image:var(--x)]` |
Utilidades de dirección en Tailwind v4 y el CSS que generan.
Por dentro, una utilidad de dirección fija una variable llamada `--tw-gradient-position` y escribe `background-image: linear-gradient(var(--tw-gradient-stops))`, mientras que las utilidades de color rellenan `--tw-gradient-stops`. La parte `in oklab` se añade dentro de una comprobación `@supports`, así que los navegadores sin soporte de interpolación siguen recibiendo un degradado sRGB que funciona. Esa separación es también la razón por la que dirección y colores pueden cambiar por separado, por ejemplo solo el color final al pasar el cursor o en modo oscuro con `dark:to-violet-900`.
> **Actualizar desde v3** Las antiguas clases `bg-gradient-to-r` siguen compilando en v4, así que un proyecto actualizado no se rompe. Renómbralas a `bg-linear-to-r` a medida que toques cada archivo, y cuenta con que los colores se verán algo más luminosos en el centro, porque ahora la mezcla es oklab.
## Paradas de color: from, via y to
`from-*` fija el color inicial, `to-*` el final y `via-*` añade un color en el medio. Funcionan todos los colores de tu tema, incluidos los modificadores de opacidad como `from-indigo-500/60`. Añade una utilidad de porcentaje después de un color para mover su parada: `from-10%`, `via-30%`, `to-90%`. También funcionan las posiciones arbitrarias, como en `from-[21.5%]`.
```html
```
Las posiciones cambian dónde cada color aparece puro.
- Uniforme: índigo, cielo, esmeralda: `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117), oklch(68.5% 0.169 237.323), oklch(69.6% 0.17 162.48))`
- Con posiciones: 10%, 30%, 90%: `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117) 10%, oklch(68.5% 0.169 237.323) 30%, oklch(69.6% 0.17 162.48) 90%)`
Las dos listas de clases de arriba, renderizadas.
## Degradados radiales y cónicos en Tailwind v4
`bg-radial` dibuja un degradado radial desde el centro, y las mismas utilidades de paradas de color lo rellenan. Mueve el centro con un valor arbitrario, donde los guiones bajos sustituyen a los espacios: `bg-radial-[at_25%_25%]`. `bg-conic` hace girar los colores alrededor del centro, y `bg-conic-180` rota el ángulo inicial.
```html
```
Una esfera iluminada y un disco metálico, cada uno en una línea.
- bg-radial-[at_25%_25%]: `radial-gradient(at 25% 25% in oklab, #ffffff, oklch(21% 0.006 285.885) 75%)`
- bg-conic-180: `conic-gradient(from 180deg in oklab, oklch(51.1% 0.262 276.966), oklch(96.2% 0.018 272.314), oklch(51.1% 0.262 276.966))`
Renderizados aproximados de los dos elementos de arriba. Para las funciones subyacentes, mira [degradados radiales en CSS](https://gradiently.design/es/guide/css-radial-gradient) y [degradados cónicos en CSS](https://gradiently.design/es/guide/css-conic-gradient).
## Modificadores de interpolación: oklab, oklch y dirección del tono
Tailwind v4 mezcla los degradados en oklab por defecto, lo que ya evita la mayoría de los centros grises. Añade un modificador después de la dirección para cambiarlo: `/srgb` coincide con diseños antiguos, `/oklch` mantiene alta la saturación entre tonos lejanos, y `/longer`, `/shorter`, `/increasing` y `/decreasing` eligen la dirección del tono. El razonamiento está en [interpolación OKLCH en degradados CSS](https://gradiently.design/es/guide/css-gradient-oklch).
- bg-linear-to-r/srgb: `linear-gradient(to right in srgb, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))`
- bg-linear-to-r (oklab): `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))`
- bg-linear-to-r/oklch: `linear-gradient(to right in oklch, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))`
- bg-linear-to-r/longer: `linear-gradient(to right in oklch longer hue, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))`
`from-indigo-500 to-teal-400` con cuatro ajustes de interpolación. El último toma el camino largo alrededor del círculo de tonos.
## Degradados propios y colores de marca
Para los colores de marca, añádelos a tu tema y estarán disponibles en todas las utilidades de color, incluidas `from-*`, `via-*` y `to-*`. Para un degradado que las utilidades no pueden expresar, como cuatro o más paradas o un ángulo poco habitual, usa un valor arbitrario con guiones bajos en lugar de espacios, o apunta una utilidad a una propiedad personalizada.
```css
@import "tailwindcss";
@theme {
--color-dusk: oklch(28% 0.09 285);
--color-ember: oklch(70% 0.19 40);
}
:root {
--brand-gradient: linear-gradient(135deg in oklch, var(--color-dusk), var(--color-ember));
}
```
Colores del tema para las utilidades de paradas, y un degradado completo guardado en una propiedad personalizada.
```html
```
Tres formas de ir más allá de la paleta por defecto.
Guardar el degradado de marca en una variable significa que se escribe una vez y se usa en todas partes, y eso es lo que hace reconocible un degradado. [Branding con degradados](https://gradiently.design/es/guide/gradient-branding) explica por qué esa coherencia importa más que los propios colores.
## Texto con degradado y estados hover en Tailwind
El texto con degradado usa las mismas clases más `bg-clip-text` y `text-transparent`. Las variantes funcionan en las utilidades de paradas, así que `hover:from-pink-500` cambia un color al pasar el cursor. Los degradados en sí no tienen transición, así que para un hover suave, funde la opacidad de una capa superpuesta o mueve `bg-position` en lugar de cambiar las paradas.
```html
Launch day
Get started
```
Texto con degradado, y un botón cuyo degradado se desliza al pasar el cursor.
### Evita
- Copiar el `bg-gradient-to-r` de v3 en proyectos nuevos con v4
- Listas largas de clases repetidas en cada tarjeta
- `/srgb` en mezclas entre tonos lejanos
- Cambiar las paradas en el hover y esperar un fundido suave
### Haz
- Usa `bg-linear-to-*` y `bg-linear-`
- Colores del tema o una propiedad personalizada para los degradados de marca
- Mantén el oklab por defecto, o prueba `/oklch` para mezclas vivas
- Anima la posición o la opacidad de una capa superpuesta
Hay más sobre la técnica del texto, incluidos el contraste y las alternativas, en [texto con degradado en CSS](https://gradiently.design/es/guide/css-gradient-text).
## FAQ
### ¿Cómo hago un degradado en Tailwind CSS?
Combina una utilidad de dirección con paradas de color, por ejemplo `bg-linear-to-r from-indigo-500 to-pink-500`. Añade `via-*` para un color intermedio.
### ¿Qué sustituyó a bg-gradient-to-r en Tailwind v4?
`bg-linear-to-r`. Los nombres de v4 son `bg-linear-to-*` para las direcciones y `bg-linear-` para ángulos como `bg-linear-45`.
### ¿Tailwind admite degradados radiales y cónicos?
Sí, desde v4: `bg-radial` y `bg-conic`, con posiciones arbitrarias como `bg-radial-[at_25%_25%]` y ángulos como `bg-conic-180`.
### ¿Cómo hago texto con degradado en Tailwind?
Añade `bg-clip-text` y `text-transparent` a un elemento con clases de degradado, como `bg-linear-to-r from-violet-600 to-rose-600`.
### ¿Por qué mis degradados de Tailwind v4 se ven distintos que en v3?
v4 mezcla en oklab por defecto y su paleta por defecto está definida en oklch. Añade `/srgb` a la utilidad de dirección para obtener la mezcla antigua.