Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Ein Verlauf im Hintergrund, ein transparenter Text und eine Schnittmaske erzeugen einen CSS3-Verlauf auf Text
Ein Verlauf im Hintergrund, ein transparenter Text und eine Schnittmaske erzeugen einen CSS-Verlauf auf Text

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.

Data on support for the background-clip-text feature across the major browsers from caniuse.com

Geschrieben von Jonas

thumb

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 anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. Andreas
    schrieb am 25.05.2021 um 11:24 Uhr:

    Für Firefox scheint es auch mit moz- unterstützt zu werden: https://www.caniuse.com/?search=text-fill-color

    Antworten
  2. Gunnar Bittersmann
    schrieb am 03.01.2013 um 10:00 Uhr:

    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.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 04.01.2013 um 11:02 Uhr:

      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!

      Antworten
  3. Andre
    schrieb am 21.12.2012 um 12:58 Uhr:

    Endlich!!! Coole Lösung!

    Antworten
  4. Text mit Verlauf überlagern in CSS3 | Sebastian Preuschoff - Portfolio & Blog
    schrieb am 21.12.2012 um 09:45 Uhr:

    […] Jonas Hellwig (kulturbanause) erklärt euch, wie Ihr – zumindest mit Webkit-Browsern, einen Te… […]

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

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 →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: