Text mit Verlauf überlagern in CSS

In Photoshop lässt sich ein Text unkompliziert mit Hilfe einer Verlaufsüberlagerung optisch aufwerten. Doch wie sieht es in CSS aus? Verläufe lassen sich grundsätzlich in CSS3 herstellen, nur auf Texten funktioniert es leider nicht so einfach. Hier kann kein Verlauf als Farbe angegeben werden, es sind daher nur einfarbige Texte möglich. Mit folgendem Trick könnt ihr zumindest in Webkit-Browsern (Chrome, Safari, Safari mobile, Android Browser) einen Verlauf als Textfarbe festlegen. In inkompatiblen Browsern wird der Text einfarbig dargestellt.

Transparenter Text + Schnittmaske

Der Effekt lässt sich mit wenig Aufwand herstellen. Zunächst wählt ihr wie gewohnt eine Schriftart, die Schriftgröße und eine Farbe als Fallback-Lösung für inkompatible Browser. Im zweiten Schritt folgen Angaben, die nur Webkit-Browser lesen und interpretieren können.

Dem Hintergrund des Textes wird ein linearer Farbverlauf zugewiesen, der Text selbst erhält eine transparente Füllung. Anschließend wird eine Schnittmaske erstellt. Der transparente Text dient dabei als Grundlage, der Verlauf wirkt nur noch in diesem Bereich. Das Endergebnis ist daher ein Verlauf in Form des Textes.

CSS-Code für Text-Gradients & Live-Beispiel

Der CSS-Code ist erfreulich übersichtlich.

.gradientText {
  font-family: Arial;
  color: yellow;
  font-size: 150px;
  background: -webkit-linear-gradient(yellow, green);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;	
}

Die nachfolgende Abbildung ist ein Live-Beispiel. Aufgrund des Vendor-Prefixes -webkit- könnt ihr das Beispiel natürlich nur in Chrome oder Safari sehen.

Beispiel in neuem Fenster öffnen

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Geschrieben von Jonas

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigen – Jonas Hellwig bei Xing