CSS: Text mit Verlauf füllen

SVG Text mit Bild bzw. Verlauf / Gradient füllen

CSS color weist einem Text Farbe zu, aber keinen Verlauf, denn gradient ist ein Wert für die Eigenschaft background.

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.

COLOR
.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.

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.

background
.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 …

Mehr zu background-image / linear Gradient

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

2 Gedanken zu „CSS: Text mit Verlauf füllen“

  1. Arndt – 14. Juli 2016

    Hallo,
    ganz tolle Seite mit sehr guten Erklärungen!!! Wieder einiges dazu gelernt!
    Nur was ich im Netz nirgendwo gefunden habe, und eben hierdurch auf diese Seite gekommen bin, habe ich leider auch hier vermisst.
    Gern möchte ich ein ovales Bild mit Rahmen auf meiner Seite einsetzen. Das runde Bild war ja kein Problem, aber . . !!!
    Eventuell könnte da jemand darauf eingehen? Ich bedanke mich schon mal im voraus!
    mfG Arndt