# Verlaufstext in Tailwind: Klassen, v4-Syntax und Lösungen
[Canonical HTML page](https://gradiently.design/de/guide/tailwind-gradient-text)
Vier Utilities machen aus einer Überschrift Verlaufstext. Die Details drumherum entscheiden, ob er scharf oder abgeschnitten aussieht. Hier sind die Klassen für Tailwind v4 und v3 und die Probleme, auf die du stoßen wirst.
## The short version
- Verlaufstext in Tailwind braucht einen Verlaufshintergrund, `bg-clip-text`, um ihn auf die Buchstaben zuzuschneiden, und `text-transparent`, damit der Hintergrund durchscheint.
- In Tailwind v4 heißt die Verlaufs-Utility `bg-linear-to-r`, v3 nutzt `bg-gradient-to-r`; die Farbklassen from, via und to funktionieren in beiden gleich.
- In Tailwind v4 wählst du den Interpolationsraum mit einem Modifier wie `bg-linear-to-r/oklch`, der die Mitte eines Verlaufs hell hält.
- Füge `box-decoration-clone` hinzu, wenn eine Verlaufsüberschrift über mehrere Zeilen umbricht, und etwas Innenabstand unten, wenn Unterlängen abgeschnitten werden.
- Prüfe den Kontrast der hellsten Farbe im Verlauf gegen die Seite, denn dort wird Verlaufstext schwer lesbar.
Für **Verlaufstext in Tailwind** legst du einen Verlauf auf das Element und schneidest ihn auf die Buchstaben zu: `bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent`. Der erste Teil malt einen Verlaufshintergrund, `bg-clip-text` stutzt diesen Hintergrund auf die Form der Glyphen, und `text-transparent` entfernt die feste Textfarbe, damit der Verlauf durchscheint. In Tailwind v3 schreibst du `bg-gradient-to-r` statt `bg-linear-to-r`; der Rest ist identisch.
```html
Ship the quiet version
```
Der ganze Effekt in einer Klassenliste. Die Reihenfolge im class-Attribut spielt keine Rolle.
## Wie die Klassen zusammenwirken
Es hilft zu wissen, was jede Utility erzeugt, denn jeder Fehler bei Verlaufstext entsteht, weil einer der vier Teile fehlt. Unter der Haube ist das dieselbe Technik wie bei normalem [Verlaufstext in CSS](https://gradiently.design/de/guide/css-gradient-text): `background-clip: text` mit transparenter Füllung.
| Utility | Was sie setzt | Wenn du sie vergisst |
| --- | --- | --- |
| `bg-linear-to-r` | Einen linearen Verlauf nach rechts | Überhaupt kein Verlauf |
| `from-*` `via-*` `to-*` | Die Farbstopps | Transparente oder Standard-Stopps |
| `bg-clip-text` | `background-clip: text` | Ein farbiger Kasten hinter festem Text |
| `text-transparent` | `color: transparent` | Fester Text verdeckt den Verlauf |
Die vier Teile von Verlaufstext in Tailwind und das Symptom, das jeder hinterlässt, wenn er fehlt.
Richtungen folgen den üblichen Endungen: `-to-r`, `-to-br`, `-to-b` und so weiter. Version 4 akzeptiert auch einen Winkel wie `bg-linear-45` oder `bg-linear-135` und ergänzt `bg-radial` und `bg-conic`, die auch für Text funktionieren. Wenn du die Verlaufs-Utilities noch kaum genutzt hast, behandelt [Farbverläufe in Tailwind](https://gradiently.design/de/guide/tailwind-gradient) Hintergründe ausführlich.
## Klassennamen in Tailwind v4 und v3
Die größte Änderung in v4 ist der Name der linearen Utility. Aus `bg-gradient-to-r` wurde `bg-linear-to-r`, passend zu den neuen radialen und konischen Utilities. Der alte Name kompiliert in v4 aus Kompatibilitätsgründen weiter, neuer Code sollte aber den neuen nutzen.
| Was du willst | Tailwind v4 | Tailwind v3 |
| --- | --- | --- |
| Links nach rechts | `bg-linear-to-r` | `bg-gradient-to-r` |
| Diagonal | `bg-linear-to-br` oder `bg-linear-45` | `bg-gradient-to-br` |
| Radial | `bg-radial` | Nur als beliebiger Wert |
| Konisch | `bg-conic` | Nur als beliebiger Wert |
| Mischen in OKLCH | `bg-linear-to-r/oklch` | Nicht verfügbar |
| Auf Text zuschneiden | `bg-clip-text` | `bg-clip-text` |
Nebeneinander, damit du erkennst, für welche Version ein Schnipsel aus dem Netz geschrieben wurde.
## Beispiele für Verlaufstext zum Kopieren
Drei oder vier Farben, die auf dem Farbkreis nah beieinander liegen, ergeben den saubersten Verlaufstext. Gegensätze wirken laut und können in der Mitte grau werden. Diese Kombinationen nutzen Farben aus der Standardpalette, beschrieben in [Tailwind-Farben](https://gradiently.design/de/guide/tailwind-colors).
- violet-600 / pink-600: `linear-gradient(90deg, #7c3aed 0%, #db2777 100%)`
- cyan-600 / blue-600 / violet-600: `linear-gradient(90deg, #0891b2 0%, #2563eb 50%, #7c3aed 100%)`
- orange-600 / rose-600: `linear-gradient(90deg, #ea580c 0%, #e11d48 100%)`
- emerald-600 / teal-600 / cyan-600: `linear-gradient(90deg, #059669 0%, #0d9488 50%, #0891b2 100%)`
- amber-500 / orange-500 / pink-600: `linear-gradient(90deg, #f59e0b 0%, #f97316 50%, #db2777 100%)`
- slate-800 / slate-500: `linear-gradient(90deg, #1e293b 0%, #64748b 100%)`
Jedes Label nennt die Stopps der Reihe nach: Der erste kommt in `from-*`, ein mittlerer in `via-*`, der letzte in `to-*`. Die 600er-Stufen halten auf einer weißen Seite genug Kontrast; auf einer dunklen Seite wechselst du zu 300 oder 400. Die Hex-Werte stammen aus der v3-Palette; die OKLCH-Versionen in v4 sehen sehr ähnlich aus.
Stopp-Positionen verschieben, wo jede Farbe sitzt. `from-20% via-50% to-80%` hält an beiden Enden einer langen Überschrift eine feste Farbe, das wirkt ruhiger als ein Verlauf, der beim ersten Buchstaben beginnt.
```html
Plans for every team
Brighter in the middle
Exactly your colours
```
Stopp-Positionen, ein Interpolations-Modifier und ein ganz eigener Verlauf. Beliebige Werte funktionieren in v3 und v4.
Blau zu Gelb ist ein guter Test für die Interpolation. In sRGB gemischt geht es durch ein gräuliches Grün; in OKLCH gemischt bleibt es lebendig. [CSS-Gradient mit oklch](https://gradiently.design/de/guide/css-gradient-oklch) erklärt, warum.
## Häufige Probleme mit Verlaufstext lösen
### Mehrzeilige Überschriften
Standardmäßig spannt sich der Verlauf über die ganze Box des Elements, eine umbrechende Überschrift bekommt also einen gestreckten Verlauf, bei dem die zweite Zeile eine andere Farbe hat als die erste. Füge `box-decoration-clone` hinzu, um jeder Zeile ihren eigenen vollen Verlauf zu geben, oder `inline-block`, um die Box auf den Text zu schrumpfen.
### Abgeschnittene Unterlängen
Ein enger Zeilenabstand wie `leading-none` kann den unteren Teil von g oder y abschneiden, weil der Hintergrund an der Zeilenbox endet. Füge `pb-1` hinzu oder lockere den Zeilenabstand etwas.
### Dark Mode
Ein Verlauf, der für weißes Papier abgestimmt ist, wirkt auf einer dunklen Seite matschig. Gib ihm mit Varianten eigene Abstufungen: `from-violet-600 to-pink-600 dark:from-violet-300 dark:to-pink-300`. Dasselbe Denken gilt für Hintergründe, behandelt in [Farbverläufe im Dark Mode](https://gradiently.design/de/guide/dark-mode-gradients).
### Vermeiden
- Verlaufstext in langen Absätzen
- Ein blasser Stopp, der auf Weiß verschwindet
- Komplementärfarben mit grauer Mitte
- Verlaufstext auf einem Verlaufshintergrund
- Keine feste Farbe für markierten Text
### Machen
- Nur für eine Überschrift oder ein einzelnes Wort
- Den hellsten Stopp gegen die Seite prüfen
- Benachbarte Farbtöne oder OKLCH-Interpolation
- Fester Grund hinter Verlaufswörtern
- `selection:text-white selection:bg-violet-600` setzen
## Verlaufstext in Tailwind animieren
Ein langsamer Schimmer entsteht durch einen Hintergrund, der doppelt so breit ist wie der Text und seitlich gleitet. In v4 definierst du die Animation in `@theme`, und sie wird zu einer `animate-*`-Utility.
```css
@import "tailwindcss";
@theme {
--animate-shine: shine 6s linear infinite;
@keyframes shine {
to { background-position: 200% center; }
}
}
```
Füge dann `bg-size-[200%_auto] animate-shine motion-reduce:animate-none` zur Überschrift hinzu und wiederhole die erste Farbe als letzten Stopp, damit die Schleife nicht springt.
Nutze das höchstens einmal pro Seite. Bewegung zieht den Blick an, das ist bei einer Launch-Überschrift der Sinn und überall sonst störend. Das Muster ist dasselbe wie bei [animierten CSS-Verläufen](https://gradiently.design/de/guide/css-animated-gradient).
## Verlaufstext lesbar halten
1. **Finde den schwächsten Stopp** Die hellste Farbe auf einer hellen Seite oder die dunkelste auf einer dunklen bestimmt den Kontrast, den du tatsächlich bekommst.
2. **Teste ihn wie Fließtext** Große, fette Überschriften brauchen nach WCAG mindestens 3:1 gegen die Seite. [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility) hat die vollständigen Regeln.
3. **Nutze Gewicht** Verläufe lesen sich in fetten und schweren Schnitten besser, wo mehr Fläche die Farbe zeigt.
4. **Hör nach ein paar Wörtern auf** Eine Überschrift oder ein betontes Wort. Alles Längere sieht schnell wie ein Darstellungsfehler aus.
Verlaufstext ist eine Web-Technik. Geht es um einen Social Post oder ein Banner und soll der Verlauf stattdessen hinter den Worten liegen, schieben Gradiently Marks ihre ruhigste Fläche hinter den Text und wählen pro Zeile helle oder dunkle Schrift, sodass die Worte lesbar sind, ohne dass du jeden Stopp testest.
## FAQ
### Wie mache ich Verlaufstext in Tailwind?
Füge einen Verlauf mit `bg-linear-to-r` (oder `bg-gradient-to-r` in v3) hinzu, Farbstopps mit `from-*` und `to-*`, dann `bg-clip-text` und `text-transparent`.
### Warum wird mein Verlaufstext in Tailwind nicht angezeigt?
Meist fehlt `text-transparent`, sodass fester Text den Verlauf verdeckt, oder `bg-clip-text` fehlt, sodass der Verlauf einen Kasten hinter den Worten füllt. Prüfe, ob alle vier Teile am selben Element stehen.
### Was ersetzt bg-gradient-to-r in Tailwind v4?
Die lineare Utility heißt jetzt `bg-linear-to-r`. Der alte Name funktioniert aus Kompatibilitätsgründen weiter, und v4 ergänzt `bg-radial`, `bg-conic` und Winkel-Utilities wie `bg-linear-45`.
### Wie verhindere ich, dass Verlaufstext Buchstaben wie g und y abschneidet?
Füge etwas Innenabstand unten wie `pb-1` hinzu oder lockere die Zeilenhöhe, denn der zugeschnittene Hintergrund endet an der Zeilenbox.
### Ist Verlaufstext barrierefrei?
Er kann es sein, wenn jeder Teil des Verlaufs die Kontrastanforderungen gegen die Seite erfüllt. Teste den hellsten Stopp und nutze Verlaufstext nur für Überschriften.