Tailwind-Farbverläufe: linear, radial und konisch in v4

Ein Tailwind-Farbverlauf besteht aus zwei Arten von Utilities: einer, die Art und Richtung des Verlaufs festlegt, etwa bg-linear-to-r, und Farbstopp-Utilities, die ihn füllen, etwa from-indigo-500 to-pink-500. In Tailwind CSS v4 wurden die Richtungs-Utilities von bg-gradient-to-* in bg-linear-to-* umbenannt, Winkel wie bg-linear-45 wurden ohne eigenes CSS möglich, und radiale und konische Verläufe kamen als vollwertige Utilities dazu.

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

Alles hier folgt der offiziellen Tailwind-Dokumentation zu background-image. Willst du wissen, was das erzeugte CSS tut, erklärt der Leitfaden zu CSS linear-gradient die Funktion darunter.

Lineare Farbverläufe: Richtungen und Winkel

bg-linear-to-t, -tr, -r, -br, -b, -bl, -l und -tl richten den Verlauf auf eine Seite oder Ecke aus. Für jede andere Richtung nimm einen Winkel: bg-linear-45 oder bg-linear-160. Für negative Winkel setz ein Minus davor, wie in -bg-linear-45.

Unter der Haube setzt eine Richtungs-Utility eine Variable namens --tw-gradient-position und schreibt background-image: linear-gradient(var(--tw-gradient-stops)), während die Farb-Utilities --tw-gradient-stops füllen. Der Teil in oklab wird innerhalb einer @supports-Prüfung ergänzt, also bekommen Browser ohne Interpolationsunterstützung trotzdem einen funktionierenden sRGB-Verlauf. Diese Trennung ist auch der Grund, warum sich Richtung und Farben unabhängig ändern lassen, zum Beispiel nur die Endfarbe bei Hover oder im Dark Mode mit dark:to-violet-900.

Farbstopps: from, via und to

from-* setzt die Startfarbe, to-* die Endfarbe, und via-* fügt eine Farbe in der Mitte hinzu. Jede Farbe deines Themes funktioniert, auch mit Opacity-Modifiern wie from-indigo-500/60. Setz eine Prozent-Utility hinter eine Farbe, um ihren Stopp zu verschieben: from-10%, via-30%, to-90%. Beliebige Positionen funktionieren ebenfalls, etwa 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 und konische Farbverläufe in Tailwind v4

bg-radial zeichnet einen radialen Verlauf von der Mitte aus, und dieselben Farbstopp-Utilities füllen ihn. Verschieb den Mittelpunkt mit einem beliebigen Wert, in dem Unterstriche für Leerzeichen stehen: bg-radial-[at_25%_25%]. bg-conic lässt Farben um die Mitte kreisen, und bg-conic-180 dreht den Startwinkel.

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

Interpolations-Modifier: oklab, oklch und Farbtonrichtung

Tailwind v4 mischt Farbverläufe standardmäßig in oklab, was die meisten grauen Mitten bereits vermeidet. Hänge einen Modifier an die Richtung, um das zu ändern: /srgb entspricht älteren Designs, /oklch hält die Sättigung zwischen weit entfernten Farbtönen hoch, und /longer, /shorter, /increasing und /decreasing wählen die Richtung um den Farbkreis. Die Begründung steht unter CSS-Farbverlauf in OKLCH.

Eigene Farbverläufe und Markenfarben

Markenfarben fügst du deinem Theme hinzu, dann stehen sie jeder Farb-Utility zur Verfügung, auch from-*, via-* und to-*. Für einen Verlauf, den die Utilities nicht ausdrücken können, etwa vier oder mehr Stopps oder einen ungewöhnlichen Winkel, nutze einen beliebigen Wert mit Unterstrichen für Leerzeichen oder richte eine Utility auf eine Custom Property.

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

Liegt der Markenverlauf in einer Variable, wird er einmal geschrieben und überall genutzt, und genau das macht einen Farbverlauf wiedererkennbar. Farbverlauf-Branding erklärt, warum diese Konsistenz mehr zählt als die Farben selbst.

Farbverlaufstext und Hover-Zustände in Tailwind

Farbverlaufstext nutzt dieselben Klassen plus bg-clip-text und text-transparent. Varianten funktionieren auf Stopp-Utilities, also ändert hover:from-pink-500 eine Farbe bei Hover. Farbverläufe selbst lassen sich nicht per Transition überblenden, also blende für einen weichen Hover die Deckkraft eines Overlays ein oder verschieb bg-position, statt Stopps zu tauschen.

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

Mehr zur Texttechnik, inklusive Kontrast und Fallbacks, steht unter Farbverlaufstext in CSS.