Text mit Verlauf überlagern in CSS
In diesem Beitrag erfahrt ihr wie sich mit CSS ein Text mit Verlauf herstellen lässt.

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.
Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen
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.
Feedback & Ergänzungen – 5 Kommentare
Kommentar zu dieser Seite
Website-Projekte mit kulturbanause
Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.
Übersicht Kompetenzen →Schulungen von kulturbanause
Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.
Übersicht Schulungsthemen →
Für Firefox scheint es auch mit moz- unterstützt zu werden: https://www.caniuse.com/?search=text-fill-color
Du hast ein Kätzchen getötet! http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/
Es gibt keine text-fill-color-Eigenschaft in CSS 3. -webkit-text-fill-color ist proprietär. Vielleicht implementieren andere Browser das auch mal und es wird in die Spec aufgenommen. Vielleicht auch nicht und Webkit baut das auch wieder aus.
Gegenwärtig ist es eine nette Spielerei, mit der man ausschließlich Webkit-Nutzern einen zusätzlichen Effekt bieten kann.
Ist häufig zu verlockend für Überschriften Buzzwords (CSS3, Responsive etc.) zu missbrauchen um die Klickzahlen zu verbessern. Du hast aber natürlich vollkommen recht – das war mehr als ungenau formuliert. Ich habe die Bezeichnung CSS3 in diesem Zusammenhang entfernt. Vielen Dank für den Hinweis!
Endlich!!! Coole Lösung!
[…] Jonas Hellwig (kulturbanause) erklärt euch, wie Ihr – zumindest mit Webkit-Browsern, einen Te… […]