Gradienti in Tailwind: lineari, radiali e conici nella v4

Un gradiente in Tailwind si costruisce con due tipi di utility: una che imposta il tipo e la direzione del gradiente, come bg-linear-to-r, e le utility dei punti di colore che lo riempiono, come from-indigo-500 to-pink-500. In Tailwind CSS v4 le utility di direzione sono state rinominate da bg-gradient-to-* a bg-linear-to-*, angoli come bg-linear-45 sono diventati possibili senza CSS personalizzato, e i gradienti radiali e conici sono arrivati come utility a pieno titolo.

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

Tutto ciò che trovi qui segue la documentazione ufficiale di Tailwind su background-image. Se vuoi capire che cosa fa il CSS generato, la guida al gradiente lineare in CSS spiega la funzione che c’è sotto.

Gradienti lineari: direzioni e angoli

bg-linear-to-t, -tr, -r, -br, -b, -bl, -l e -tl puntano il gradiente verso un lato o un angolo. Per qualsiasi altra direzione usa un angolo: bg-linear-45 o bg-linear-160. Anteponi un segno meno per gli angoli negativi, come in -bg-linear-45.

Dietro le quinte, una utility di direzione imposta una variabile chiamata --tw-gradient-position e scrive background-image: linear-gradient(var(--tw-gradient-stops)), mentre le utility dei colori riempiono --tw-gradient-stops. La parte in oklab viene aggiunta dentro un controllo @supports, così i browser senza supporto per l’interpolazione ricevono comunque un gradiente sRGB funzionante. Questa separazione è anche il motivo per cui direzione e colori possono cambiare in modo indipendente, per esempio solo il colore finale al passaggio del mouse o in modalità scura con dark:to-violet-900.

Punti di colore: from, via e to

from-* imposta il colore iniziale, to-* quello finale, e via-* aggiunge un colore nel mezzo. Funziona ogni colore del tuo tema, compresi i modificatori di opacità come from-indigo-500/60. Aggiungi una utility percentuale dopo un colore per spostarne il punto: from-10%, via-30%, to-90%. Funzionano anche le posizioni arbitrarie, come in 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>

Gradienti radiali e conici in Tailwind v4

bg-radial disegna un gradiente radiale dal centro, e lo riempiono le stesse utility dei punti di colore. Sposta il centro con un valore arbitrario, dove i trattini bassi sostituiscono gli spazi: bg-radial-[at_25%_25%]. bg-conic fa ruotare i colori attorno al centro, e bg-conic-180 ruota l’angolo di partenza.

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

Modificatori di interpolazione: oklab, oklch e direzione della tonalità

Tailwind v4 sfuma i gradienti in oklab per impostazione predefinita, e questo evita già la maggior parte dei punti centrali grigi. Aggiungi un modificatore dopo la direzione per cambiarlo: /srgb corrisponde ai design più vecchi, /oklch mantiene alta la saturazione tra tonalità lontane, e /longer, /shorter, /increasing e /decreasing scelgono la direzione della tonalità. Il ragionamento è in interpolazione OKLCH nei gradienti CSS.

Gradienti personalizzati e colori del brand

Per i colori del brand, aggiungili al tuo tema e diventano disponibili per ogni utility di colore, comprese from-*, via-* e to-*. Per un gradiente che le utility non riescono a esprimere, per esempio con quattro o più punti o con un angolo insolito, usa un valore arbitrario con i trattini bassi al posto degli spazi, oppure punta una utility a una proprietà personalizzata.

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

Tenere il gradiente del brand in una sola variabile significa scriverlo una volta e usarlo ovunque, ed è questo a rendere riconoscibile un gradiente. Il gradiente nel branding spiega perché questa coerenza conta più dei colori stessi.

Testo con gradiente e stati hover in Tailwind

Il testo con gradiente usa le stesse classi più bg-clip-text e text-transparent. Le varianti funzionano sulle utility dei punti, quindi hover:from-pink-500 cambia un colore al passaggio del mouse. I gradienti in sé non hanno transizioni, quindi per un hover fluido fai sfumare l’opacità di un livello sovrapposto o sposta bg-position invece di scambiare i punti.

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

Altri dettagli sulla tecnica del testo, compresi contrasto e alternative di riserva, sono in testo con gradiente in CSS.