CSS: Text mit Verlauf füllen

Firefox setzt bei Text den Verlauf nur innerhalb des Texts, aber die Webkit-Browser (Safari, Chrome, Opera und Edge) setzen den Verlauf hinter die komplette Box. Es gibt allerdings einen alten Trick mit background-clip und text-fill-color, der bei den Webkits einen Verlauf in den Text setzt.

In den Webkit-Browsern setzt der Verlauf auf CSS background-clip und background-fill-color und braucht den webkit-Präfix. In Firefox funktioniert der Verlauf im Text ohne Browser-Präfix.

.textcolor {
 background-image:linear-gradient(90deg,blue,yellow,red,purple);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

Eigentlich sollte der Verlauf im Hintergrund doch mit Blau anfangen? Der Text sitzt zentriert in seinem Block, der Verlauf erstreckt sich – wenn auch außerhalb des Texts unsichtbar – über die Breite des Blocks.

Wird die Breite der Box an den Text angepasst, dann kommt der komplette Verlauf zum Vorschein.

Text mit Gradient / Verlauf

background-clip: text kommt von Apple und ist kein Standard, wohl aber Werte wie border-box und content-box. text-fill-color wurde 2006 eingeführt und füllt einen Text mit Farbe – kein Unterschied zu color. -webkit-text-fill-color sorgt dafür, dass der Hintergrund im Text in Webkit-Browsern durchscheint.

Text mit Bild füllen

Text mit einem Hintergrundbild funktioniert auf dieselbe Weise: In Firefox reicht background-image, für die Webkit-Browser wieder mit background-clip und text-fill-color: transparent.

.text-image {
 font-size: 6em;
 font-family: "Arial Black";
 background-image: url('floral.jpg');
 background-size: 50%;
}

Theoretisch könnte auch background-attachment: fixed eingesetzt werden. Das Hintergrundbild bliebe beim Scrollen der Seite stehen. Aber da spielt Firefox nicht mit. Lassen wir das also lieber …

text-stroke

text-stroke und text-fill gibt es zwar nicht im Standard, sondern nur mit -webkit-Präfix. Aber Beides ist wohl so interessant, dass auch Firefox und Edge diese Eigenschaften unterstützen – allerdings mit dem -webkit-Präfix, nicht mit -moz oder -ms.

.stroke {
   -webkit-text-stroke:2px #AB2158;
}

Ausschluss mit der @supports-Regel

Safari, Chrome, Firefox und Microsoft Edge zeigen sowohl den Verlauf im Text als auch den Text mit einem Bild als Hintergrund. IE11 und ältere Versionen von Internet Explorer nicht. Die @supports-Regel liefert dann doch für IE11 und Vorgänger ein sauberes Textbild.

@supports ( -webkit-text-stroke:thin ) {
   .textcolor {
        background-image:linear-gradient(45deg,blue,yellow,red,purple);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
   }
   .text-image {
         background-image: url('backgroundfiller.jpg');
         background-size: 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke:1px #FAB6D3;
   }
   .stroke {
        -webkit-text-stroke:2px #AB2158;
   }
}

-webkit-text-stroke wird von Safari, Chrome, Firefox, Microsoft Edge und Opera unterstützt (nicht Opera Mini). Browser, die background-image für Texte nicht unterstützen, können so durch @supports ausgeschlossen werden.