CSS

Text mit Farbverlauf per CSS – background-clip: text erklärt

Für Überschriften auf Websites gibt es eine elegante Lösung ohne hunderte <span>: Ein Hintergrundverlauf wird auf die Buchstabenform zugeschnitten. Vier Zeilen CSS – plus ein paar Details, damit es in jedem Browser sauber aussieht.

Farben wählen, Format CSS öffnen und den fertigen Code mit HTML-Beispiel kopieren.

CSS-Code erzeugen

Der Code

.farbtext {
  background: linear-gradient(90deg, #5a189a, #c9184a, #f77f00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

<h1 class="farbtext">Willkommen</h1>

Im Farbtext Studio bekommst du genau diesen Code mit deinen eigenen Farben: Palette wählen, „Als Code“ › CSS, kopieren.

Was jede Zeile macht

Zeile	Wirkung
`background: linear-gradient(…)`	Malt einen Verlauf als Hintergrund des Elements. `90deg` heißt von links nach rechts.
`-webkit-background-clip: text`	Schneidet den Hintergrund auf die Buchstaben zu. Mit Präfix für Safari und ältere Browser.
`background-clip: text`	Dasselbe in der Standard-Schreibweise.
`color: transparent`	Macht die eigentliche Schriftfarbe durchsichtig, damit der Verlauf durchscheint.

Eigene Farben, fertiger CSS-Code samt HTML-Beispiel – in Sekunden.

CSS-Verlauf erzeugen

Details für ein sauberes Ergebnis

Verlauf so breit wie der Text

Ein h1 ist ein Block-Element und so breit wie der Container. Bei kurzem Text siehst du dann nur den Anfang des Verlaufs. Abhilfe: display: inline-block oder width: fit-content.

Mehrzeilige Überschriften

Bei Inline-Elementen über mehrere Zeilen läuft der Verlauf über alle Zeilen hinweg. Soll jede Zeile den ganzen Verlauf zeigen: -webkit-box-decoration-break: clone; box-decoration-break: clone;

Leuchtendere Mitte

Verläufe zwischen gegensätzlichen Farben (z. B. Blau → Gelb) werden in der Mitte oft grau. Aktuelle Browser können in einem besseren Farbraum mischen: linear-gradient(90deg in oklab, …). Das entspricht dem Schalter „Leuchtende Übergänge“ im Tool.

Fallback

Ältere Browser ohne background-clip: text würden einen farbigen Kasten mit unsichtbarem Text zeigen. Sicher ist diese Variante:

.farbtext { color: #c9184a; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .farbtext {
    background: linear-gradient(90deg, #5a189a, #c9184a, #f77f00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

Animierter Verlauf

.farbtext {
  background-size: 200% auto;
  animation: verlauf 4s linear infinite;
}
@keyframes verlauf { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) {
  .farbtext { animation: none; }
}

Damit der Übergang nahtlos ist, sollte die erste Farbe am Ende des Verlaufs wiederholt werden.

CSS oder einzelne span?

	CSS-Verlauf	Ein span pro Buchstabe (HTML)
Websites	Ideal – kurzer Code, Text bleibt ein Stück	Funktioniert, aber viel Code
E-Mails / Newsletter	Nein – die meisten Mail-Programme ignorieren `background-clip`	Ja – Inline-Farben gehen überall
Word, Google Docs	Nein	Ja, über „Mit Farben kopieren“
Screenreader	Liest den Text normal	Manche lesen zerstückelten Text Buchstabe für Buchstabe
Modi	Nur Verlauf	Auch Zeichen, Wörter, Zeilen, Zufall

Faustregel: Auf der eigenen Website CSS, in Mails und Dokumenten das HTML-Format oder „Mit Farben kopieren“.

Typische Fehler

text-shadow zerstört den Effekt. Der Schatten liegt über dem durchsichtigen Text. Stattdessen filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)) verwenden.
Präfix vergessen. Ohne -webkit-background-clip zeigen ältere Safari-Versionen nur einen bunten Kasten.
Textauswahl. Markierter Text kann in manchen Browsern unsichtbar werden. ::selection { color: #fff; background: #5a189a; } hilft.
Zu wenig Kontrast. Jede Farbe des Verlaufs muss auf dem Seitenhintergrund lesbar sein. Der Kontrast-Check im Tool prüft das.

CSS-Farbverlauf jetzt erzeugen

Palette wählen, Vorschau ansehen, CSS mit HTML-Beispiel kopieren. Kostenlos und ohne Anmeldung.

Farbtext Studio öffnen

Häufige Fragen

Funktioniert background-clip: text in allen Browsern?

In allen aktuellen Browsern. Für ältere Safari-Versionen die Variante mit -webkit- mitschreiben und einen Fallback per @supports setzen.

Kann ich CSS-Verläufe in E-Mails nutzen?

Nein, die meisten Mail-Programme unterstützen background-clip nicht. Für Mails das HTML-Format mit einzeln gefärbten Buchstaben verwenden.

Wie animiere ich den Verlauf?

background-size auf 200 % setzen und background-position per @keyframes verschieben. Für Nutzer mit „Bewegung reduzieren“ die Animation abschalten.

Warum wird der Verlauf in der Mitte grau?

Weil im RGB-Farbraum gemischt wird. Mit „in oklab“ im linear-gradient mischen aktuelle Browser leuchtender.

Ist der Generator kostenlos?

Ja, ohne Anmeldung. Alles läuft im Browser.

Quellen

background-clip, MDN Web Docs (englisch).
background-clip: text, Can I use (englisch).
Understanding Success Criterion 1.4.3: Contrast (Minimum), W3C (englisch).
A perceptual color space for image processing (Oklab), Björn Ottosson (englisch).