Tailwind-gradienter: lineære, radiale og koniske i v4

En Tailwind-gradient bygges av to typer verktøyklasser: én som setter gradienttypen og retningen, som bg-linear-to-r, og klasser for fargestopp som fyller den, som from-indigo-500 to-pink-500. I Tailwind CSS v4 fikk retningsklassene nytt navn, fra bg-gradient-to-* til bg-linear-to-*, vinkler som bg-linear-45 ble mulige uten egen CSS, og radiale og koniske gradienter kom som fullverdige klasser.

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

Alt her følger den offisielle Tailwind-dokumentasjonen for background-image. Hvis du vil vite hva den genererte CSS-en gjør, forklarer guiden om lineære gradienter i CSS funksjonen under.

Lineære gradienter: retninger og vinkler

bg-linear-to-t, -tr, -r, -br, -b, -bl, -l og -tl peker gradienten mot en side eller et hjørne. For enhver annen retning bruker du en vinkel: bg-linear-45 eller bg-linear-160. Sett et minustegn foran for negative vinkler, som i -bg-linear-45.

Under panseret setter en retningsklasse en variabel som heter --tw-gradient-position og skriver background-image: linear-gradient(var(--tw-gradient-stops)), mens fargeklassene fyller --tw-gradient-stops. Delen in oklab legges til inne i en @supports-sjekk, så nettlesere uten støtte for interpolering fortsatt får en fungerende sRGB-gradient. Den delingen er også grunnen til at retning og farger kan endres uavhengig av hverandre, for eksempel bare sluttfargen ved hover eller i mørk modus med dark:to-violet-900.

Fargestopp: from, via og to

from-* setter startfargen, to-* sluttfargen, og via-* legger til én farge i midten. Hver farge i temaet ditt fungerer, inkludert opasitetsmodifikatorer som from-indigo-500/60. Legg til en prosentklasse etter en farge for å flytte stoppet: from-10%, via-30%, to-90%. Vilkårlige posisjoner fungerer også, som i 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>

Radiale og koniske gradienter i Tailwind v4

bg-radial tegner en radial gradient fra midten, og de samme klassene for fargestopp fyller den. Flytt midten med en vilkårlig verdi, der understreker står for mellomrom: bg-radial-[at_25%_25%]. bg-conic sveiper farger rundt midten, og bg-conic-180 roterer startvinkelen.

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

Modifikatorer for interpolering: oklab, oklch og fargetoneretning

Tailwind v4 blander gradienter i oklab som standard, noe som allerede unngår de fleste grå midtpunkter. Legg til en modifikator etter retningen for å endre det: /srgb samsvarer med eldre design, /oklch holder metningen høy mellom fjerne fargetoner, og /longer, /shorter, /increasing og /decreasing velger fargetoneretningen. Begrunnelsen står i OKLCH-interpolering i CSS-gradienter.

Egne gradienter og merkevarefarger

Merkevarefarger legger du til i temaet ditt, så blir de tilgjengelige for hver fargeklasse, inkludert from-*, via-* og to-*. For en gradient klassene ikke kan uttrykke, som fire eller flere stopp eller en uvanlig vinkel, bruker du en vilkårlig verdi med understreker for mellomrom, eller peker en klasse mot en egendefinert egenskap.

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

Å holde merkevaregradienten i én variabel betyr at den skrives én gang og brukes overalt, og det er det som gjør en gradient gjenkjennelig. Merkevarebygging med gradienter forklarer hvorfor den konsekvensen betyr mer enn selve fargene.

Gradienttekst og hover-tilstander i Tailwind

Gradienttekst bruker de samme klassene pluss bg-clip-text og text-transparent. Varianter fungerer på stoppklasser, så hover:from-pink-500 endrer en farge ved hover. Gradienter i seg selv har ingen overgang, så for en jevn hover toner du opasiteten til et overlegg eller flytter bg-position i stedet for å bytte stopp.

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

Mer om tekstteknikken, inkludert kontrast og reserver, står i gradienttekst i CSS.