# Gradienti in Tailwind: lineari, radiali e conici nella v4 [Canonical HTML page](https://gradiently.design/it/guide/tailwind-gradient) Tailwind v4 ha rinominato le utility per i gradienti, ha aggiunto angoli, gradienti radiali e conici e ha portato la sfumatura predefinita in oklab. Ecco l’intero sistema, con il CSS che ogni classe produce. ## The short version - In Tailwind CSS v4 i gradienti lineari usano bg-linear-to-* per le direzioni e bg-linear- per gli angoli, al posto dei nomi bg-gradient-to-* della v3. - I colori si aggiungono con le utility from-*, via-* e to-*, e le loro posizioni con utility percentuali come from-10% e to-90%. - Tailwind v4 aggiunge le utility bg-radial e bg-conic, con valori arbitrari per le posizioni come bg-radial-[at_25%_25%]. - In Tailwind v4 i gradienti sfumano in oklab per impostazione predefinita, e modificatori come /oklch, /srgb e /longer cambiano l’interpolazione. - Qualsiasi gradiente che Tailwind non riesce a esprimere con le utility si può scrivere come valore arbitrario, per esempio bg-linear-[25deg,red_5%,yellow_60%]. 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. ```html
``` Un gradiente da sinistra a destra, dall’indaco al rosa. Non serve CSS personalizzato. 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))` Ciò che produce quell’elenco di classi: `to right in oklab`, con indigo-500 e pink-500 predefiniti di Tailwind. Tutto ciò che trovi qui segue la [documentazione ufficiale di Tailwind su background-image](https://tailwindcss.com/docs/background-image). Se vuoi capire che cosa fa il CSS generato, la guida al [gradiente lineare in CSS](https://gradiently.design/it/guide/css-linear-gradient) 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`. | Classe | Direzione generata | Sostituisce nella v3 | | --- | --- | --- | | `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 valore arbitrario | | `bg-linear-to-b/srgb` | `to bottom in srgb` | la sfumatura predefinita della v3 | | `bg-(image:--brand-gradient)` | `var(--brand-gradient)` come immagine intera | `bg-[image:var(--x)]` | Le utility di direzione in Tailwind v4 e il CSS che producono. 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`. > **Aggiornare dalla v3** Le vecchie classi `bg-gradient-to-r` vengono ancora compilate nella v4, quindi un progetto aggiornato non si rompe. Rinominale in `bg-linear-to-r` man mano che tocchi ogni file, e aspettati colori leggermente più luminosi al centro, perché ora la sfumatura è in oklab. ## 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%]`. ```html
``` Le posizioni cambiano il punto in cui ogni colore è pienamente se stesso. - Uniforme: indigo, sky, emerald: `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 posizioni: 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%)` I due elenchi di classi qui sopra, renderizzati. ## 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. ```html
``` Una sfera illuminata e un disco metallico, ciascuno in una riga. - 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))` Resa approssimativa dei due elementi qui sopra. Per le funzioni che ci sono sotto, vedi [gradienti radiali in CSS](https://gradiently.design/it/guide/css-radial-gradient) e [gradienti conici in CSS](https://gradiently.design/it/guide/css-conic-gradient). ## 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](https://gradiently.design/it/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 quattro impostazioni di interpolazione. L’ultima fa il giro lungo attorno al cerchio delle tonalità. ## 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. ```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)); } ``` I colori del tema per le utility dei punti, e un gradiente completo tenuto in una sola proprietà personalizzata. ```html
``` Tre modi per andare oltre la palette predefinita. 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](https://gradiently.design/it/guide/gradient-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. ```html

Launch day

Get started ``` Testo con gradiente, e un pulsante il cui gradiente scorre al passaggio del mouse. ### Da evitare - Copiare `bg-gradient-to-r` della v3 nei nuovi progetti v4 - Lunghi elenchi di classi ripetuti su ogni card - `/srgb` nelle sfumature tra tonalità lontane - Scambiare i punti in hover e aspettarsi una dissolvenza fluida ### Da fare - Usare `bg-linear-to-*` e `bg-linear-` - Colori del tema o una proprietà personalizzata per i gradienti del brand - Tenere oklab predefinito, o provare `/oklch` per sfumature vivaci - Animare la posizione o l’opacità di un livello sovrapposto Altri dettagli sulla tecnica del testo, compresi contrasto e alternative di riserva, sono in [testo con gradiente in CSS](https://gradiently.design/it/guide/css-gradient-text). ## FAQ ### Come si crea un gradiente in Tailwind CSS? Combina una utility di direzione con i punti di colore, per esempio `bg-linear-to-r from-indigo-500 to-pink-500`. Aggiungi `via-*` per un colore intermedio. ### Che cosa ha sostituito bg-gradient-to-r in Tailwind v4? `bg-linear-to-r`. I nomi della v4 sono `bg-linear-to-*` per le direzioni e `bg-linear-` per angoli come `bg-linear-45`. ### Tailwind supporta i gradienti radiali e conici? Sì, dalla v4: `bg-radial` e `bg-conic`, con posizioni arbitrarie come `bg-radial-[at_25%_25%]` e angoli come `bg-conic-180`. ### Come si crea un testo con gradiente in Tailwind? Aggiungi `bg-clip-text` e `text-transparent` a un elemento con classi di gradiente, come `bg-linear-to-r from-violet-600 to-rose-600`. ### Perché i miei gradienti in Tailwind v4 sono diversi da quelli della v3? La v4 sfuma in oklab per impostazione predefinita e la sua palette predefinita è definita in oklch. Aggiungi `/srgb` alla utility di direzione per ottenere la vecchia sfumatura.