Text mit Verlauf überlagern – CSS Textmasken

Textmasken sind sowohl im Print- als auch im Webdesign sehr beliebt. Die Maskierungstechnik wird u.a. verwendet, um Texte mit einem Farbverlauf, einem Bild oder einem Video zu füllen.

Das Grundprinzip

Die Textmaske besteht aus zwei Elementen: Dem Text selbst und einem Element, dass diesen Text überlagert und den Inhalt der Maske bereitstellt. Im Idealfall ist dieses Überlagerungselement ein CSS Pseudoelement.

Mit Hilfe eines CSS Blend Modes wird nun das Element mit dem Text optisch verrechnet. Wenn der Hintergrund der Textmaske weiß sein soll, dann benötigt ihr schwarzen Text und den Blendmodus screen, wenn der Hintergrund der Textmaske schwarz ist, benötigt ihr weißen Text und den Blendmodus multiply

css-text-mask
Schwarzer Text auf weißem Grund wird mit einem farbigen Verlauf im Blendmodus »screen« überlagert, um den Verlauf auf den Text zu begrenzen

Text mit Farbverlauf weißem Grund

Der folgende CSS-Code ist notwendig, um eine Textmaske auf weißem Grund zu erzeugen. Der Blendmodus screen sorgt dafür, dass alle Pixel des Überlagerungselements sichtbar sind, die vor schwarzen Pixeln platziert wurden. Alles was vor weißen Pixeln positioniert wurde ist unsichtbar. Graue Pixel sorgen für Halbtransparenzen.

Beispiel anschauen

<h1>kulturbanause.de</h1>
h1 {
  position: relative;
  color: black;
}
h1::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  background: linear-gradient(45deg, gold, deeppink);
  mix-blend-mode: screen;
}

Text mit Farbverlauf auf schwarzem Grund

Der folgende CSS-Code erzeugt eine Textmaske auf schwarzem Grund. Hier ist es genau umgekehrt. Der Modus »multiply« sorgt dafür, dass nur die Pixel des Überlagerungselements sichtbar sind, die vor weißen Pixeln positioniert werden. Alles was vor schwarz steht ist unsichtbar.

Beispiel anschauen

<h1>kulturbanause.de</h1>
html {
  background:black; 
}

h1 {
  position: relative;
  color: white;
} 

h1:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  background: linear-gradient(45deg, gold, deeppink);
  mix-blend-mode: multiply;
}

Textmaske aus Bild

Die bisherigen Beispiele arbeiten mit einem Verlauf. Selbstverständlich kann auch ein Bild oder ein Video innerhalb des Textes dargestellt werden.

Beispiel anschauen

Maskierung vor beliebigem Hintergrund

Die zuvor gezeigten Beispiele haben den Nachteil, dass die CSS Blend Modes nur vor absolut weißem oder schwarzem Hintergrund gut funktionieren. Wenn ein anderer Hintergrund im Einsatz ist, fallen die Blend Modes aus, da die Maske noch anteilig zu sehen ist. Glücklicherweise gibt einen alternativen Ansatz mit text-fill-color und background-clip, der allerdings auf Webkit-Browser beschränkt ist.

Zunächst wählt ihr wie gewohnt eine Schriftart, die Schriftgröße und eine Farbe als Fallback-Lösung für inkompatible Browser. Dem Hintergrund des Textes wird ein linearer Farbverlauf bzw. ein Bild zugewiesen, der Text selbst erhält mit text-fill-color eine transparente Füllung. Anschließend wird eine Schnittmaske mit background-clip 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.

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

Die nachfolgende Abbildung ist ein Live-Beispiel.


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

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. Daniel
    schrieb am 12.10.2016 um 21:06 Uhr:

    Gibt es auch die Möglichkeit das mit anderen Hintergrundfarben zu machen? Oder nur s/w ?
    #373f5b wäre mein Hintergrund und ich habe es mit verschiedenen Farben versucht. Geht das irgendwie?

    Antworten
  2. Lisa Schubert
    schrieb am 27.09.2016 um 13:10 Uhr:

    Hallo,

    was denkt ihr, ab welcher Schriftgröße macht es überhaupt Sinn ein Bild als Textmaske zu verwenden?
    Also ab welcher Schriftgröße geht ihr davon aus, dass das Motiv wenigstens in Teilen zu erkennen ist?

    Grüße,
    Lisa

    Antworten
    • Jonas Hellwig
      schrieb am 27.09.2016 um 13:58 Uhr:

      Hallo Lisa, das kann man pauschal schwer beantworten. Verläufe gehören ja technisch gesehen auch schon dazu. Aber so wie es hier unten bei POTD umgesetzt ist, finde ich es auch in kleinen Schriftgrößen sehr ansprechend.

      Antworten
  3. René Philipp
    schrieb am 22.09.2016 um 20:13 Uhr:

    Hallo, Jonas.

    Als Redakteur einer Vereinsseite habe ich eine etwas komplexere Variante des Farbverlaufs auf einigen Seiten von http://www.esperanto-nb.de plaziert. Eine Beschreibung dazu gibt es dort auch, und zwar unter http://esperanto-nb.de/tekniko/technik-gradient.html ganz unten. Weiter oben stehen die älteren Versionen.

    Da einige Formatierungen nur zusammen mit mix-blend-mode sinnvoll sind, habe ich das ganze in @supports gepackt.

    Gruß

    René

    Antworten
  4. Franz Meyer
    schrieb am 21.09.2016 um 17:47 Uhr:

    Super Artikel!

    Antworten
  5. Sahin
    schrieb am 21.09.2016 um 14:03 Uhr:

    Schade dass der IE das nicht zu 100% supported. Was würdest du für einen Fallback für IE empfehlen?

    Antworten
    • Jonas Hellwig
      schrieb am 21.09.2016 um 14:29 Uhr:

      Hallo Sahin, ich würde wahrscheinlich die Maske weglassen und stattdessen den Text einfärben.

      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 →