# Tailwind-gradients: lineair, radiaal en conic in v4

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

Tailwind v4 gaf zijn gradientklassen nieuwe namen, voegde hoeken, radiale en conic kleurverlopen toe en mengt standaard in oklab. Hier is het hele systeem, met de CSS die elke klasse maakt.

## The short version

- In Tailwind CSS v4 gebruiken lineaire kleurverlopen bg-linear-to-* voor richtingen en bg-linear-<angle> voor hoeken, als vervanging van de namen bg-gradient-to-* uit v3.
- Kleuren voeg je toe met de klassen from-*, via-* en to-*, en hun posities met procentklassen zoals from-10% en to-90%.
- Tailwind v4 voegt de klassen bg-radial en bg-conic toe, met vrije waarden voor posities zoals bg-radial-[at_25%_25%].
- Kleurverlopen in Tailwind v4 mengen standaard in oklab, en modifiers zoals /oklch, /srgb en /longer veranderen de interpolatie.
- Elk kleurverloop dat Tailwind niet met klassen kan uitdrukken, schrijf je als vrije waarde, zoals bg-linear-[25deg,red_5%,yellow_60%].

Een **Tailwind-gradient** bouw je uit twee soorten klassen: een die het type en de richting van het kleurverloop bepaalt, zoals `bg-linear-to-r`, en kleurstopklassen die het vullen, zoals `from-indigo-500 to-pink-500`. In Tailwind CSS v4 kregen de richtingsklassen een nieuwe naam, van `bg-gradient-to-*` naar `bg-linear-to-*`, werden hoeken zoals `bg-linear-45` mogelijk zonder eigen CSS, en kwamen radiale en conic kleurverlopen erbij als volwaardige klassen.

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

Een kleurverloop van links naar rechts, van indigo naar roze. Geen eigen CSS nodig.

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

Wat die klassenlijst tekent: `to right in oklab`, met de standaardkleuren indigo-500 en pink-500 van Tailwind.

Alles hier volgt de officiële [Tailwind-documentatie over background-image](https://tailwindcss.com/docs/background-image). Wil je weten wat de gegenereerde CSS doet, dan legt de gids over [het CSS lineaire kleurverloop](https://gradiently.design/nl/guide/css-linear-gradient) de functie eronder uit.

## Lineaire kleurverlopen: richtingen en hoeken

`bg-linear-to-t`, `-tr`, `-r`, `-br`, `-b`, `-bl`, `-l` en `-tl` richten het kleurverloop op een zijde of hoek. Voor elke andere richting gebruik je een hoek: `bg-linear-45` of `bg-linear-160`. Zet er een minteken voor voor negatieve hoeken, zoals in `-bg-linear-45`.

| Klasse | Gegenereerde richting | Vervangt in 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` | een vrije waarde |
| `bg-linear-to-b/srgb` | `to bottom in srgb` | de standaardmenging van v3 |
| `bg-(image:--brand-gradient)` | `var(--brand-gradient)` als de hele afbeelding | `bg-[image:var(--x)]` |

Richtingsklassen in Tailwind v4 en de CSS die ze maken.

Onder de motorkap zet een richtingsklasse een variabele met de naam `--tw-gradient-position` en schrijft ze `background-image: linear-gradient(var(--tw-gradient-stops))`, terwijl de kleurklassen `--tw-gradient-stops` vullen. Het deel `in oklab` wordt binnen een `@supports`-controle toegevoegd, zodat browsers zonder interpolatie toch een werkend sRGB-kleurverloop krijgen. Door die scheiding kunnen richting en kleuren ook los van elkaar veranderen, bijvoorbeeld alleen de eindkleur bij hover of in de donkere modus met `dark:to-violet-900`.

> **Overstappen van v3** Oude klassen als `bg-gradient-to-r` compileren nog steeds in v4, dus een geüpgraded project breekt niet. Hernoem ze naar `bg-linear-to-r` wanneer je een bestand toch aanraakt, en verwacht dat kleuren in het midden iets helderder ogen, omdat de menging nu oklab is.

## Kleurstops: from, via en to

`from-*` bepaalt de beginkleur, `to-*` de eindkleur en `via-*` voegt één kleur in het midden toe. Elke kleur uit je thema werkt, ook met doorzichtigheidsmodifiers zoals `from-indigo-500/60`. Zet een procentklasse achter een kleur om de stop te verplaatsen: `from-10%`, `via-30%`, `to-90%`. Vrije posities werken ook, zoals `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>
```

Posities bepalen waar elke kleur helemaal zichzelf is.

- Gelijkmatig: indigo, hemel, 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))`
- Gepositioneerd: 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 twee klassenlijsten hierboven, getekend.

## Radiale en conic kleurverlopen in Tailwind v4

`bg-radial` tekent een radiaal kleurverloop vanuit het midden, en dezelfde kleurstopklassen vullen het. Verplaats het midden met een vrije waarde, waarin underscores spaties vervangen: `bg-radial-[at_25%_25%]`. `bg-conic` laat kleuren rond het midden draaien, en `bg-conic-180` draait de beginhoek.

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

Een verlichte bol en een metalen schijf, elk in één regel.

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

Benaderingen van de twee elementen hierboven. Voor de onderliggende functies, zie [CSS radiale kleurverlopen](https://gradiently.design/nl/guide/css-radial-gradient) en [CSS conic kleurverlopen](https://gradiently.design/nl/guide/css-conic-gradient).

## Interpolatiemodifiers: oklab, oklch en tintrichting

Tailwind v4 mengt kleurverlopen standaard in oklab, wat de meeste grijze middens al voorkomt. Zet een modifier achter de richting om dat te veranderen: `/srgb` past bij oudere ontwerpen, `/oklch` houdt de verzadiging hoog tussen ver uiteenliggende tinten, en `/longer`, `/shorter`, `/increasing` en `/decreasing` kiezen de richting over de tintcirkel. De uitleg staat in [OKLCH-interpolatie voor CSS-kleurverlopen](https://gradiently.design/nl/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` met vier interpolatie-instellingen. De laatste neemt de lange weg rond de tintcirkel.

## Eigen kleurverlopen en merkkleuren

Voeg merkkleuren toe aan je thema, dan zijn ze beschikbaar voor elke kleurklasse, ook `from-*`, `via-*` en `to-*`. Voor een kleurverloop dat de klassen niet kunnen uitdrukken, zoals vier of meer stops of een ongebruikelijke hoek, gebruik je een vrije waarde met underscores voor spaties, of laat je een klasse naar een custom property wijzen.

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

Themakleuren voor de stopklassen, en een volledig kleurverloop in één custom property.

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

Drie manieren om verder te gaan dan het standaardpalet.

Houd je het merkkleurverloop in één variabele, dan schrijf je het één keer en gebruik je het overal, en dat maakt een kleurverloop herkenbaar. [Branding met kleurverlopen](https://gradiently.design/nl/guide/gradient-branding) legt uit waarom die consistentie meer telt dan de kleuren zelf.

## Gradienttekst en hover-states in Tailwind

Gradienttekst gebruikt dezelfde klassen plus `bg-clip-text` en `text-transparent`. Varianten werken op stopklassen, dus `hover:from-pink-500` verandert een kleur bij hover. Kleurverlopen zelf hebben geen transitie, dus voor een vloeiende hover laat je de doorzichtigheid van een overlay vervagen of verschuif je `bg-position` in plaats van stops te wisselen.

```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, en een knop waarvan het kleurverloop bij hover verschuift.

### Vermijd

- `bg-gradient-to-r` uit v3 kopiëren naar nieuwe v4-projecten
- Lange klassenlijsten herhaald op elke kaart
- `/srgb` bij mengingen tussen ver uiteenliggende tinten
- Stops wisselen bij hover en een vloeiende overgang verwachten

### Doe

- Gebruik `bg-linear-to-*` en `bg-linear-<angle>`
- Themakleuren of een custom property voor merkkleurverlopen
- Houd de standaard oklab, of probeer `/oklch` voor levendige mengingen
- Animeer de positie of de doorzichtigheid van een overlay

Meer over de teksttechniek, met contrast en terugvalopties, lees je in [gradienttekst in CSS](https://gradiently.design/nl/guide/css-gradient-text).

## FAQ

### Hoe maak ik een kleurverloop in Tailwind CSS?

Combineer een richtingsklasse met kleurstops, bijvoorbeeld `bg-linear-to-r from-indigo-500 to-pink-500`. Voeg `via-*` toe voor een middenkleur.

### Wat vervangt bg-gradient-to-r in Tailwind v4?

`bg-linear-to-r`. De namen in v4 zijn `bg-linear-to-*` voor richtingen en `bg-linear-<angle>` voor hoeken zoals `bg-linear-45`.

### Ondersteunt Tailwind radiale en conic kleurverlopen?

Ja, vanaf v4: `bg-radial` en `bg-conic`, met vrije posities zoals `bg-radial-[at_25%_25%]` en hoeken zoals `bg-conic-180`.

### Hoe maak ik gradienttekst in Tailwind?

Voeg `bg-clip-text` en `text-transparent` toe aan een element met kleurverloopklassen, zoals `bg-linear-to-r from-violet-600 to-rose-600`.

### Waarom zien mijn kleurverlopen in Tailwind v4 er anders uit dan in v3?

v4 mengt standaard in oklab en het standaardpalet is in oklch gedefinieerd. Voeg `/srgb` toe aan de richtingsklasse voor de oudere menging.