Clases de degradado en Tailwind: lineal, radial y cónico en v4

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.

<div class="h-32 rounded-2xl bg-linear-to-r from-indigo-500 to-pink-500"></div>

Todo lo que hay aquí sigue la documentación oficial de background-image de Tailwind. Si quieres saber qué hace el CSS generado, la guía del degradado lineal en CSS 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.

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.

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%].

<!-- three stops, evenly spaced -->
<div class="bg-linear-to-r from-indigo-500 via-sky-500 to-emerald-500"></div>

<!-- the same stops, pulled towards the edges -->
<div class="bg-linear-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%"></div>

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.

<div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

<div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div>

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.

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.

@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));
}

<!-- brand colours through the stop utilities -->
<div class="bg-linear-135 from-dusk to-ember"></div>

<!-- the whole gradient from a custom property -->
<div class="bg-(image:--brand-gradient)"></div>

<!-- a one-off arbitrary gradient -->
<div class="bg-linear-[25deg,red_5%,yellow_60%,lime_90%,teal]"></div>

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 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.

<h1 class="bg-linear-to-r from-violet-600 to-rose-600 bg-clip-text text-5xl font-bold text-transparent">
  Launch day
</h1>

<a class="bg-linear-to-r from-violet-600 to-rose-600 bg-size-[200%_100%] bg-left px-5 py-3 text-white transition-[background-position] duration-500 hover:bg-right">
  Get started
</a>

Hay más sobre la técnica del texto, incluidos el contraste y las alternativas, en texto con degradado en CSS.