# Tailwind-gradientklasser: linjära, radiella och koniska i v4

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

Tailwind v4 döpte om sina gradientklasser, lade till vinklar samt radiella och koniska gradienter och bytte standardblandningen till oklab. Här är hela systemet, med CSS:en varje klass ger.

## The short version

- I Tailwind CSS v4 använder linjära gradienter bg-linear-to-* för riktningar och bg-linear-<vinkel> för vinklar, och ersätter namnen bg-gradient-to-* från v3.
- Färger läggs till med from-*, via-* och to-*, och deras positioner med procentklasser som from-10% och to-90%.
- Tailwind v4 lägger till klasserna bg-radial och bg-conic, med egna värden för positioner som bg-radial-[at_25%_25%].
- Gradienter i Tailwind v4 blandas i oklab som standard, och modifierare som /oklch, /srgb och /longer ändrar interpolationen.
- Varje gradient som Tailwind inte kan uttrycka med klasser kan skrivas som ett eget värde, till exempel bg-linear-[25deg,red_5%,yellow_60%].

En **Tailwind-gradient** byggs av två sorters klasser: en som anger gradienttyp och riktning, som `bg-linear-to-r`, och färgstoppklasser som fyller den, som `from-indigo-500 to-pink-500`. I Tailwind CSS v4 döptes riktningsklasserna om från `bg-gradient-to-*` till `bg-linear-to-*`, vinklar som `bg-linear-45` blev möjliga utan egen CSS, och radiella och koniska gradienter kom som fullvärdiga klasser.

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

En gradient från vänster till höger, från indigo till rosa. Ingen egen CSS behövs.

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 klasslistan ritar: `to right in oklab`, med Tailwinds standardfärger indigo-500 och pink-500.

Allt här följer den officiella [Tailwind-dokumentationen om bakgrundsbilder](https://tailwindcss.com/docs/background-image). Vill du veta vad den genererade CSS:en gör förklarar guiden [linjära gradienter i CSS](https://gradiently.design/sv/guide/css-linear-gradient) funktionen under ytan.

## Linjära gradienter: riktningar och vinklar

`bg-linear-to-t`, `-tr`, `-r`, `-br`, `-b`, `-bl`, `-l` och `-tl` riktar gradienten mot en sida eller ett hörn. För varje annan riktning använder du en vinkel: `bg-linear-45` eller `bg-linear-160`. Sätt ett minustecken framför för negativa vinklar, som i `-bg-linear-45`.

| Klass | Genererad riktning | Ersätter 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` | ett eget värde |
| `bg-linear-to-b/srgb` | `to bottom in srgb` | standardblandningen i v3 |
| `bg-(image:--brand-gradient)` | `var(--brand-gradient)` som hela bilden | `bg-[image:var(--x)]` |

Riktningsklasser i Tailwind v4 och CSS:en de ger.

Under ytan sätter en riktningsklass en variabel som heter `--tw-gradient-position` och skriver `background-image: linear-gradient(var(--tw-gradient-stops))`, medan färgklasserna fyller `--tw-gradient-stops`. Delen `in oklab` läggs till i en `@supports`-kontroll, så webbläsare utan stöd för interpolation får ändå en fungerande sRGB-gradient. Den uppdelningen är också varför riktning och färger kan ändras var för sig, till exempel bara slutfärgen vid hover eller i mörkt läge med `dark:to-violet-900`.

> **Uppgradering från v3** Gamla `bg-gradient-to-r`-klasser kompileras fortfarande i v4, så ett uppgraderat projekt går inte sönder. Döp om dem till `bg-linear-to-r` när du rör varje fil, och räkna med att färgerna ser något ljusare ut i mitten, eftersom blandningen nu sker i oklab.

## Färgstopp: from, via och to

`from-*` anger startfärgen, `to-*` slutfärgen och `via-*` lägger till en färg i mitten. Varje färg i ditt tema fungerar, även med opacitetsmodifierare som `from-indigo-500/60`. Lägg en procentklass efter en färg för att flytta dess stopp: `from-10%`, `via-30%`, `to-90%`. Egna positioner fungerar också, 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>
```

Positioner ändrar var varje färg är helt sig själv.

- Jämnt: indigo, himmel, 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))`
- Positionerat: 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 två klasslistorna ovan, ritade.

## Radiella och koniska gradienter i Tailwind v4

`bg-radial` ritar en radiell gradient från mitten, och samma färgstoppklasser fyller den. Flytta mitten med ett eget värde, där understreck står för mellanslag: `bg-radial-[at_25%_25%]`. `bg-conic` sveper färger runt mitten, och `bg-conic-180` roterar startvinkeln.

```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 sfär och en metallisk skiva, var och en på en rad.

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

Ungefärliga återgivningar av de två elementen ovan. Funktionerna under ytan finns i [radiella gradienter i CSS](https://gradiently.design/sv/guide/css-radial-gradient) och [koniska gradienter i CSS](https://gradiently.design/sv/guide/css-conic-gradient).

## Interpolationsmodifierare: oklab, oklch och nyansriktning

Tailwind v4 blandar gradienter i oklab som standard, vilket redan undviker de flesta grå mittpunkter. Lägg till en modifierare efter riktningen för att ändra det: `/srgb` matchar äldre designer, `/oklch` håller mättnaden hög mellan avlägsna nyanser, och `/longer`, `/shorter`, `/increasing` och `/decreasing` väljer nyansriktning. Resonemanget finns i [OKLCH-interpolation i CSS-gradienter](https://gradiently.design/sv/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 fyra interpolationsinställningar. Den sista tar den långa vägen runt nyanscirkeln.

## Egna gradienter och varumärkesfärger

För varumärkesfärger lägger du in dem i ditt tema, så blir de tillgängliga för alla färgklasser, även `from-*`, `via-*` och `to-*`. För en gradient som klasserna inte kan uttrycka, till exempel fyra eller fler stopp eller en ovanlig vinkel, använder du ett eget värde med understreck för mellanslag, eller låter en klass peka på en egen variabel.

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

Temafärger för stoppklasserna, och en hel gradient sparad i en enda egen variabel.

```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 sätt att gå bortom standardpaletten.

Håller du varumärkesgradienten i en variabel skrivs den en gång och används överallt, och det är det som gör en gradient igenkännbar. [Gradienter i varumärket](https://gradiently.design/sv/guide/gradient-branding) förklarar varför den konsekvensen betyder mer än själva färgerna.

## Gradienttext och hover-lägen i Tailwind

Gradienttext använder samma klasser plus `bg-clip-text` och `text-transparent`. Varianter fungerar på stoppklasser, så `hover:from-pink-500` ändrar en färg vid hover. Gradienter övergår inte mjukt av sig själva, så för en mjuk hover tonar du ett överlags opacitet eller flyttar `bg-position` i stället för att byta 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>
```

Gradienttext, och en knapp vars gradient glider vid hover.

### Undvik

- Att kopiera `bg-gradient-to-r` från v3 in i nya v4-projekt
- Långa klasslistor som upprepas på varje kort
- `/srgb` på blandningar mellan avlägsna nyanser
- Att byta stopp vid hover och vänta sig en mjuk toning

### Gör så här

- Använd `bg-linear-to-*` och `bg-linear-<vinkel>`
- Temafärger eller en egen variabel för varumärkesgradienter
- Behåll standarden oklab, eller prova `/oklch` för livfulla blandningar
- Animera positionen eller ett överlags opacitet

Mer om texttekniken, med kontrast och reservlösningar, finns i [gradienttext i CSS](https://gradiently.design/sv/guide/css-gradient-text).

## FAQ

### Hur gör jag en gradient i Tailwind CSS?

Kombinera en riktningsklass med färgstopp, till exempel `bg-linear-to-r from-indigo-500 to-pink-500`. Lägg till `via-*` för en färg i mitten.

### Vad ersatte bg-gradient-to-r i Tailwind v4?

`bg-linear-to-r`. Namnen i v4 är `bg-linear-to-*` för riktningar och `bg-linear-<vinkel>` för vinklar som `bg-linear-45`.

### Stöder Tailwind radiella och koniska gradienter?

Ja, från v4: `bg-radial` och `bg-conic`, med egna positioner som `bg-radial-[at_25%_25%]` och vinklar som `bg-conic-180`.

### Hur gör jag gradienttext i Tailwind?

Lägg till `bg-clip-text` och `text-transparent` på ett element med gradientklasser, till exempel `bg-linear-to-r from-violet-600 to-rose-600`.

### Varför ser mina Tailwind v4-gradienter annorlunda ut än i v3?

v4 blandar i oklab som standard, och standardpaletten är definierad i oklch. Lägg till `/srgb` på riktningsklassen för att få den äldre blandningen.