Farbverlaufstext in CSS, sauber umgesetzt

Verlaufstext in CSS entsteht, indem du einen Farbverlauf als Hintergrund des Textelements malst, diesen Hintergrund mit background-clip: text auf die Buchstabenformen beschneidest und den Text selbst transparent machst, damit der Verlauf durchscheint. Es braucht drei Deklarationen, funktioniert in jedem aktuellen Browser und bleibt echter, markierbarer, durchsuchbarer Text statt eines Bildes.

.gradient-text {
  background-image: linear-gradient(90deg, #6d28d9, #be185d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Der Rest dieses Leitfadens behandelt, was die Dreizeilen-Version falsch macht: fehlende Fallbacks, Kontrast, mehrzeiliger Text, abgeschnittene Unterlängen und die Designfrage, wann Verlaufstext überhaupt hilft. Zum Look von Verlaufsschriftzügen in Social- und Markenarbeit statt im Web siehe Texteffekte.

Ein robustes Rezept für Verlaufstext mit Fallbacks

Wendet ein Browser color: transparent an, aber nicht den Clip, verschwindet der Text. Sichere dich ab: Gib dem Element eine einfarbige Farbe aus dem Verlauf und wechsle nur dann zur transparenten Version, wenn der Browser die Unterstützung bestätigt. Ergänze ein Zurücksetzen für den Modus mit erzwungenen Farben, in dem das System deine Farben ersetzt und der Text sichtbar bleiben muss.

.gradient-text {
  color: #6d28d9; /* solid fallback from the gradient */
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(90deg, #6d28d9, #be185d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .gradient-text {
    background: none;
    color: CanvasText;
  }
}

Die MDN-Seite zu background-clip dokumentiert den Wert text und seine aktuelle Unterstützung.

Kontrast: prüfe beide Enden des Farbverlaufs

Ein Kontrastprüfer nimmt eine Textfarbe, Verlaufstext hat aber viele. Die Worte sind nur so lesbar wie ihr schwächster Teil, prüfe also den hellsten und den dunkelsten Stopp gegen den Hintergrund und sieh auch in die Mitte, denn eine sRGB-Mischung kann heller oder stumpfer ausfallen als jedes Ende. Für große Schaurezeilen verlangt WCAG mindestens 3:1, für normalen Text 4,5:1. Farbkontrast erklärt die Verhältnisse.

Mehrzeiligen Verlaufstext und abgeschnittene Buchstaben beheben

Bei einem Inline-Element, das umbricht, legt der Browser einen Hintergrund über alle Zeilen, als wären sie ein einziger Streifen, sodass die erste Zeile den Anfang des Verlaufs bekommt und die letzte das Ende. Meist willst du, dass jede Zeile den vollen Verlauf trägt. box-decoration-break: clone erledigt das. Bei Blockelementen wie einer Überschrift spannt der Verlauf schon die ganze Box, sodass ein langer Verlauf über einer breiten Überschrift in kurzen Zeilen nur seine Mitte zeigen kann.

.gradient-text {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* stop descenders being cut off */
  line-height: 1.15;
  padding-block-end: 0.08em;
}

Abgeschnittene Unterlängen sind die andere Überraschung. Der Hintergrund malt nur die Box des Elements, sodass bei sehr enger line-height die Teile der Buchstaben, die darunter hängen, transparent bleiben und verschwinden. Eine Zeilenhöhe von etwa 1,1 oder etwas Padding unten behebt das. Kursive Schaurschriften können aus demselben Grund die Spitze ihres letzten Buchstabens rechts verlieren; ein Hauch Padding auf der Inline-Seite hilft.

Wann Verlaufstext funktioniert und wann nicht

Eine gute Faustregel: Verlaufstext ist ein Akzent, wie Kursivschrift. Ein hervorgehobenes Wort in einer Überschrift zieht den Blick an; ein ganzer Absatz davon ermüdet ihn. Fette Schnitte helfen, denn dünne Striche zeigen zu wenig Farbe, um als Verlauf zu wirken. Nutzt der Rest der Seite schon Verlaufshintergründe, ist flache Schrift meist die stärkere Wahl; diesen Fall behandelt Text auf Farbverlaufshintergründen.

Verlaufstext animieren

Damit Farbe durch die Buchstaben fließt, mache den Hintergrund größer als den Text und bewege ihn. Bemesse ihn mit 200 % Breite und animiere background-position mit alternate hin und her, sodass es nie einen Sprung gibt, wo die Schleife neu startet. Beachte die Einstellungen für reduzierte Bewegung und halte es langsam: Ein Schimmern alle paar Sekunden wirkt wie Politur, ein schneller Zyklus wie eine Warnung.

.gradient-text--flow {
  background-image: linear-gradient(90deg, #6d28d9, #be185d, #c2410c);
  background-size: 200% 100%;
  animation: flow 6s ease-in-out infinite alternate;
}

@keyframes flow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text--flow { animation: none; }
}

Dieselben Hintergrundtricks treiben allgemein animierte Farbverläufe in CSS an, und Verlaufskonturen statt -füllungen behandelt CSS-Farbverlaufsrahmen.