Tailwind-gradients: lineair, radiaal en conic in v4

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.

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

Alles hier volgt de officiële Tailwind-documentatie over background-image. Wil je weten wat de gegenereerde CSS doet, dan legt de gids over het CSS lineaire kleurverloop 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.

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.

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

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

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

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.

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.

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

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

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

Meer over de teksttechniek, met contrast en terugvalopties, lees je in gradienttekst in CSS.