# Farbverlaufstext in CSS, sauber umgesetzt [Canonical HTML page](https://gradiently.design/de/guide/css-gradient-text) Drei Zeilen CSS legen einen Farbverlauf in deine Buchstaben. Ihn lesbar, robust und geschmackvoll zu machen, braucht ein paar mehr, und das Wissen, wann Text schlicht bleiben sollte. ## The short version - Verlaufstext in CSS entsteht, indem du einen Farbverlauf als Hintergrund des Elements malst, ihn mit background-clip: text auf die Form der Buchstaben beschneidest und die Textfarbe transparent machst. - Setze immer zuerst eine einfarbige Textfarbe und wende die transparente nur innerhalb einer @supports-Abfrage an, damit die Worte nie verschwinden. - Jeder Teil des Farbverlaufs braucht genug Kontrast zum Hintergrund, prüfe also den hellsten und den dunkelsten Stopp, nicht nur einen. - Verlaufstext eignet sich für kurze Schaurezeilen in großen Größen und funktioniert schlecht bei Fließtext, Links und kleinen Beschriftungen. - box-decoration-break: clone gibt jeder Zeile eines umbrechenden Inline-Elements ihren eigenen vollen Verlauf. **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. ```css .gradient-text { background-image: linear-gradient(90deg, #6d28d9, #be185d); -webkit-background-clip: text; background-clip: text; color: transparent; } ``` Die Kerntechnik. Die Zeile mit Präfix hält ältere Safari- und Chromium-Versionen zufrieden. Violett zu Rosé, für helle Seiten: `linear-gradient(90deg, #6d28d9, #be185d)` Der Verlauf in diesen Buchstaben. Beide Enden sind dunkel genug, um auf Weiß lesbar zu sein. 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](https://gradiently.design/de/guide/text-effects). ## 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. ```css .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; } } ``` Zuerst einfarbig, den Verlauf nur, wo er unterstützt wird, und eine Systemfarbe, wenn Nutzende ihre eigene erzwingen. Die [MDN-Seite zu background-clip](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://gradiently.design/de/guide/color-contrast-accessibility) erklärt die Verhältnisse. - Auf Weiß: Violett bis Rosé: `linear-gradient(90deg, #6d28d9, #be185d)` - Auf Weiß: Ozean bis Petrol: `linear-gradient(90deg, #0369a1, #0f766e)` - Auf Weiß: Glut bis Rosé: `linear-gradient(90deg, #c2410c, #be185d)` - Auf Fast-Schwarz: Flieder bis Pink: `linear-gradient(90deg, #a78bfa, #f472b6)` - Auf Fast-Schwarz: Cyan bis Zitrone: `linear-gradient(90deg, #67e8f9, #fde047)` Textverläufe, deren Stopps alle auf dem genannten Hintergrund 5:1 erreichen. Auf Weiß liegt jeder Stopp über 5:1; auf #0b0b12 über 7:1. > **Der häufige Fehler** Ein Verlauf, der zu einer blassen Farbe ausblendet, etwa Violett zu Hellrosa auf Weiß, macht das Ende jedes Wortes fast unsichtbar. Halte beide Enden auf einer ähnlichen, sicheren Helligkeit und lass den Farbton das Ändern übernehmen. ## 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. ```css .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; } ``` Jede Zeile bekommt ihren eigenen vollen Verlauf, und die Schwänze von g, j, p und y bleiben im gemalten Bereich. 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 ### Vermeiden - Fließtext, wo der Farbwechsel das Lesen verlangsamt - Links und Buttons, wo Farbe den Zustand signalisiert - Kleine Beschriftungen unter etwa 24 px, wo man den Verlauf ohnehin nicht sieht - Regenbogenverläufe mit fünf oder mehr Farbtönen - Verlaufstext auf einem Verlaufshintergrund ### Nutze ihn für - Ein Wort oder eine kurze Wendung in einer großen Überschrift - Einen Produkt- oder Markennamen in einem Hero - Große Zahlen in einem Kennzahlenblock - Zwei oder drei verwandte Farbtöne mit ähnlicher Helligkeit - Schlichte, ruhige Hintergründe, auf denen die Buchstaben führen 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](https://gradiently.design/de/guide/text-on-gradient). ## 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](https://gradiently.design/de/guide/reduced-motion) und halte es langsam: Ein Schimmern alle paar Sekunden wirkt wie Politur, ein schneller Zyklus wie eine Warnung. ```css .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; } } ``` Farbe, die durch die Worte hin und her treibt. Kombiniere sie mit dem Clip und dem Fallback aus dem Rezept oben. Dieselben Hintergrundtricks treiben allgemein [animierte Farbverläufe in CSS](https://gradiently.design/de/guide/css-animated-gradient) an, und Verlaufskonturen statt -füllungen behandelt [CSS-Farbverlaufsrahmen](https://gradiently.design/de/guide/css-gradient-border). ## FAQ ### Wie mache ich Verlaufstext in CSS? Setze einen Farbverlauf als `background-image`, füge `-webkit-background-clip: text` und `background-clip: text` hinzu und setze `color: transparent`. Lege außerhalb einer `@supports`-Abfrage eine einfarbige Farbe als Fallback fest. ### Warum ist mein Verlaufstext unsichtbar? Der Text ist transparent, aber der Hintergrund wird nicht beschnitten, meist weil die Clip-Deklaration fehlt, falsch geschrieben oder nicht unterstützt ist. Wende `color: transparent` nur innerhalb von `@supports (background-clip: text)` an. ### Ist Verlaufstext barrierefrei? Er kann es sein, wenn jeder Teil des Verlaufs genug Kontrast zum Hintergrund hat und der Text echter Text bleibt. Prüfe den hellsten und den dunkelsten Stopp und setze im Modus mit erzwungenen Farben die Farben zurück. ### Warum sind die Unterseiten meiner Buchstaben abgeschnitten? Der beschnittene Hintergrund deckt nur die Box des Elements ab, sodass bei enger Zeilenhöhe Unterlängen außerhalb liegen. Erhöhe die Zeilenhöhe auf etwa 1,1 oder füge etwas Padding unten hinzu. ### Kann ich Verlaufstext in E-Mails nutzen? Die Unterstützung für `background-clip: text` ist in E-Mail-Clients lückenhaft, nutze dort also eine einfarbige Farbe oder ein Bild mit Alt-Text. Siehe [Farbverläufe in E-Mails](https://gradiently.design/de/guide/gradients-in-email).