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

[Canonical HTML page](https://gradiently.design/nb/guide/tailwind-gradient)

Tailwind v4 ga gradientklassene nye navn, la til vinkler, radiale og koniske gradienter, og byttet standardblandingen til oklab. Her er hele systemet, med CSS-en hver klasse lager.

## The short version

- I Tailwind CSS v4 bruker lineære gradienter bg-linear-to-* for retninger og bg-linear-<angle> for vinkler, som erstatter navnene bg-gradient-to-* fra v3.
- Farger legges til med klassene from-*, via-* og to-*, og posisjonene deres med prosentklasser som from-10% og to-90%.
- Tailwind v4 legger til klassene bg-radial og bg-conic, med vilkårlige verdier for posisjoner som bg-radial-[at_25%_25%].
- Gradienter i Tailwind v4 blandes i oklab som standard, og modifikatorer som /oklch, /srgb og /longer endrer interpoleringen.
- Enhver gradient Tailwind ikke kan uttrykke med klasser, kan skrives som en vilkårlig verdi, som bg-linear-[25deg,red_5%,yellow_60%].

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.

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

En gradient fra venstre til høyre, fra indigo til rosa. Ingen egen CSS trengs.

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

Det klasselisten tegner: `to right in oklab`, med standardfargene indigo-500 og pink-500 i Tailwind.

Alt her følger den offisielle [Tailwind-dokumentasjonen for background-image](https://tailwindcss.com/docs/background-image). Hvis du vil vite hva den genererte CSS-en gjør, forklarer guiden om [lineære gradienter i CSS](https://gradiently.design/nb/guide/css-linear-gradient) 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`.

| Klasse | Generert retning | Erstatter i 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` | en vilkårlig verdi |
| `bg-linear-to-b/srgb` | `to bottom in srgb` | standardblandingen i v3 |
| `bg-(image:--brand-gradient)` | `var(--brand-gradient)` som hele bildet | `bg-[image:var(--x)]` |

Retningsklasser i Tailwind v4 og CSS-en de lager.

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

> **Oppgradere fra v3** Gamle `bg-gradient-to-r`-klasser kompileres fortsatt i v4, så et oppgradert prosjekt går ikke i stykker. Gi dem nytt navn, `bg-linear-to-r`, etter hvert som du rører hver fil, og regn med at fargene ser litt klarere ut i midten, fordi blandingen nå er oklab.

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

```html
<!-- 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>
```

Posisjoner endrer hvor hver farge er fullt ut seg selv.

- Jevnt: indigo, himmelblå, smaragd: `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))`
- Posisjonert: 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%)`

De to klasselistene over, tegnet.

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

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

En belyst kule og en metallisk skive, hver på én linje.

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

Omtrentlige gjengivelser av de to elementene over. For funksjonene som ligger under, se [radiale gradienter i CSS](https://gradiently.design/nb/guide/css-radial-gradient) og [koniske gradienter i CSS](https://gradiently.design/nb/guide/css-conic-gradient).

## 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](https://gradiently.design/nb/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` med fire interpoleringsinnstillinger. Den siste tar den lange veien rundt fargesirkelen.

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

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

Temafarger for stoppklassene, og en hel gradient holdt i én egendefinert egenskap.

```html
<!-- 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>
```

Tre måter å gå utover standardpaletten på.

Å 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](https://gradiently.design/nb/guide/gradient-branding) 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.

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

Gradienttekst, og en knapp der gradienten glir ved hover.

### Unngå

- Å kopiere `bg-gradient-to-r` fra v3 inn i nye v4-prosjekter
- Lange klasselister gjentatt på hvert kort
- `/srgb` på overganger mellom fjerne fargetoner
- Å bytte stopp ved hover og forvente en jevn overgang

### Gjør

- Bruk `bg-linear-to-*` og `bg-linear-<angle>`
- Temafarger eller en egendefinert egenskap for merkevaregradienter
- Behold standarden oklab, eller prøv `/oklch` for livlige overganger
- Animer posisjonen eller opasiteten til et overlegg

Mer om tekstteknikken, inkludert kontrast og reserver, står i [gradienttekst i CSS](https://gradiently.design/nb/guide/css-gradient-text).

## FAQ

### Hvordan lager jeg en gradient i Tailwind CSS?

Kombiner en retningsklasse med fargestopp, for eksempel `bg-linear-to-r from-indigo-500 to-pink-500`. Legg til `via-*` for en farge i midten.

### Hva erstattet bg-gradient-to-r i Tailwind v4?

`bg-linear-to-r`. Navnene i v4 er `bg-linear-to-*` for retninger og `bg-linear-<angle>` for vinkler som `bg-linear-45`.

### Støtter Tailwind radiale og koniske gradienter?

Ja, fra v4: `bg-radial` og `bg-conic`, med vilkårlige posisjoner som `bg-radial-[at_25%_25%]` og vinkler som `bg-conic-180`.

### Hvordan lager jeg gradienttekst i Tailwind?

Legg til `bg-clip-text` og `text-transparent` på et element med gradientklasser, som `bg-linear-to-r from-violet-600 to-rose-600`.

### Hvorfor ser gradientene mine i Tailwind v4 annerledes ut enn i v3?

v4 blander i oklab som standard, og standardpaletten er definert i oklch. Legg til `/srgb` på retningsklassen for å få den eldre blandingen.