Verlaufstext in Tailwind: Klassen, v4-Syntax und Lösungen

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.

<h1 class="bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-5xl font-bold text-transparent">
  Ship the quiet version
</h1>

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: background-clip: text mit transparenter Füllung.

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

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.

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.

<!-- Stop positions -->
<h2 class="bg-linear-to-r from-cyan-600 from-20% via-blue-600 via-50% to-violet-600 to-80% bg-clip-text text-transparent">
  Plans for every team
</h2>

<!-- OKLCH interpolation keeps the middle bright -->
<h2 class="bg-linear-to-r/oklch from-blue-600 to-yellow-400 bg-clip-text text-transparent">
  Brighter in the middle
</h2>

<!-- Arbitrary gradient, underscores stand in for spaces -->
<h2 class="bg-[linear-gradient(100deg,#1e1b4b_0%,#7c3aed_60%,#f472b6_100%)] bg-clip-text text-transparent">
  Exactly your colours
</h2>

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

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.

@import "tailwindcss";

@theme {
  --animate-shine: shine 6s linear infinite;

  @keyframes shine {
    to { background-position: 200% center; }
  }
}

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.

Verlaufstext lesbar halten

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

   Teste ihn wie Fließtext

   Große, fette Überschriften brauchen nach WCAG mindestens 3:1 gegen die Seite. Farbkontrast und Barrierefreiheit hat die vollständigen Regeln.

3. 3

   Nutze Gewicht

   Verläufe lesen sich in fetten und schweren Schnitten besser, wo mehr Fläche die Farbe zeigt.

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