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

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

Tailwind v4 hat seine Farbverlauf-Utilities umbenannt, Winkel sowie radiale und konische Verläufe hinzugefügt und die Standardmischung auf oklab umgestellt. Hier ist das ganze System, mit dem CSS, das jede Klasse erzeugt.

## The short version

- In Tailwind CSS v4 nutzen lineare Farbverläufe bg-linear-to-* für Richtungen und bg-linear-<angle> für Winkel und ersetzen damit die Namen bg-gradient-to-* aus v3.
- Farben kommen über die Utilities from-*, via-* und to-* hinzu, ihre Positionen über Prozent-Utilities wie from-10% und to-90%.
- Tailwind v4 bringt die Utilities bg-radial und bg-conic, mit beliebigen Werten für Positionen wie bg-radial-[at_25%_25%].
- Farbverläufe in Tailwind v4 mischen standardmäßig in oklab, und Modifier wie /oklch, /srgb und /longer ändern die Interpolation.
- Jeden Farbverlauf, den Tailwind nicht mit Utilities ausdrücken kann, schreibst du als beliebigen Wert, etwa bg-linear-[25deg,red_5%,yellow_60%].

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.

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

Ein Farbverlauf von links nach rechts, von Indigo zu Pink. Kein eigenes CSS nötig.

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

Was diese Klassenliste rendert: `to right in oklab`, mit den Standardfarben indigo-500 und pink-500 von Tailwind.

Alles hier folgt der offiziellen [Tailwind-Dokumentation zu background-image](https://tailwindcss.com/docs/background-image). Willst du wissen, was das erzeugte CSS tut, erklärt der Leitfaden zu [CSS linear-gradient](https://gradiently.design/de/guide/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`.

| Klasse | Erzeugte Richtung | Ersetzt 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` | einen beliebigen Wert |
| `bg-linear-to-b/srgb` | `to bottom in srgb` | die Standardmischung aus v3 |
| `bg-(image:--brand-gradient)` | `var(--brand-gradient)` als ganzes Bild | `bg-[image:var(--x)]` |

Richtungs-Utilities in Tailwind v4 und das CSS, das sie erzeugen.

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

> **Upgrade von v3** Alte Klassen wie `bg-gradient-to-r` kompilieren in v4 weiterhin, ein aktualisiertes Projekt bricht also nicht. Benenne sie in `bg-linear-to-r` um, wenn du die jeweilige Datei anfasst, und rechne damit, dass Farben in der Mitte etwas heller wirken, weil jetzt in oklab gemischt wird.

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

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

Positionen ändern, wo jede Farbe ganz sie selbst ist.

- Gleichmäßig: indigo, sky, emerald: `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))`
- Positioniert: 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%)`

Die beiden Klassenlisten von oben, gerendert.

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

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

Eine beleuchtete Kugel und eine metallische Scheibe, jeweils in einer Zeile.

- 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ähre Darstellungen der beiden Elemente oben. Zu den zugrunde liegenden Funktionen siehe [CSS radialer Farbverlauf](https://gradiently.design/de/guide/css-radial-gradient) und [CSS conic-gradient](https://gradiently.design/de/guide/css-conic-gradient).

## 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](https://gradiently.design/de/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` mit vier Interpolations-Einstellungen. Die letzte nimmt den langen Weg um den Farbkreis.

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

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

Theme-Farben für die Stopp-Utilities und ein ganzer Farbverlauf in einer 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>
```

Drei Wege über die Standardpalette hinaus.

Liegt der Markenverlauf in einer Variable, wird er einmal geschrieben und überall genutzt, und genau das macht einen Farbverlauf wiedererkennbar. [Farbverlauf-Branding](https://gradiently.design/de/guide/gradient-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.

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

Farbverlaufstext und ein Button, dessen Verlauf bei Hover gleitet.

### Vermeiden

- `bg-gradient-to-r` aus v3 in neue v4-Projekte kopieren
- Lange Klassenlisten, die sich auf jeder Karte wiederholen
- `/srgb` bei Übergängen zwischen weit entfernten Farbtönen
- Stopps bei Hover tauschen und ein weiches Überblenden erwarten

### Besser

- `bg-linear-to-*` und `bg-linear-<angle>` nutzen
- Theme-Farben oder eine Custom Property für Markenverläufe
- Beim Standard oklab bleiben oder `/oklch` für leuchtende Übergänge testen
- Position oder die Deckkraft eines Overlays animieren

Mehr zur Texttechnik, inklusive Kontrast und Fallbacks, steht unter [Farbverlaufstext in CSS](https://gradiently.design/de/guide/css-gradient-text).

## FAQ

### Wie erstelle ich einen Farbverlauf in Tailwind CSS?

Kombiniere eine Richtungs-Utility mit Farbstopps, zum Beispiel `bg-linear-to-r from-indigo-500 to-pink-500`. Füge `via-*` für eine mittlere Farbe hinzu.

### Was hat bg-gradient-to-r in Tailwind v4 ersetzt?

`bg-linear-to-r`. Die Namen in v4 sind `bg-linear-to-*` für Richtungen und `bg-linear-<angle>` für Winkel wie `bg-linear-45`.

### Unterstützt Tailwind radiale und konische Farbverläufe?

Ja, ab v4: `bg-radial` und `bg-conic`, mit beliebigen Positionen wie `bg-radial-[at_25%_25%]` und Winkeln wie `bg-conic-180`.

### Wie mache ich Farbverlaufstext in Tailwind?

Füge `bg-clip-text` und `text-transparent` zu einem Element mit Verlaufsklassen hinzu, etwa `bg-linear-to-r from-violet-600 to-rose-600`.

### Warum sehen meine Farbverläufe in Tailwind v4 anders aus als in v3?

v4 mischt standardmäßig in oklab, und seine Standardpalette ist in oklch definiert. Hänge `/srgb` an die Richtungs-Utility, um die ältere Mischung zu bekommen.