CSS: Text mit Verlauf füllen

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

CSS kann einem Text Farbe zuweisen, aber keinen Verlauf. Es gibt zwar einen alten Trick mit background-clip und text-fill-color, der aber nur in einer Browserfamilie wirkt.

Der Verlauf hier erscheint nur in Webkit-Browsern (Chrome, Opera, Safari) und in IE Edge (wow!) und setzt auf CSS background-clip.

COLOR
background:linear-gradient(90deg,blue,yellow,red,purple);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

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, alle anderen aber wenigstens Farbe abbekommt.

Also: Nur Webkit-Browser. Schade drum?

Es gibt Fallbacks auf der Basis von Modernizr, z.B. bei CSS Tricks. Aber am einfachsten ist es, den Text als SVG zu setzen. Bis auf IE8 und ältere Dinosaurier kommen alle Browser mit SVG klar.

COLOR
<svg width="300" height="100" viewBox="0 0 300 100">
<linearGradient id="lg" x1="0" y1="0" x2="1" y2="0">
   <stop offset="0" stop-color="blue" />
   <stop offset="0.25" stop-color="green" />
   <stop offset="0.5" stop-color="yellow" />
   <stop offset="0.75" stop-color="red" />
</linearGradient>
<text x="0" y="80" style="font-size: 4em;font-weight: bold;fill:url(#lg)">COLOR</text>
</svg>

SVG: Text mit Bild füllen

Text mit einem Hintergrundbild zu füllen, funktioniert ebenfalls zuverlässig mit ein paar Zeilen SVG.

BACKGROUNDFILLER
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" viewBox="0 0 479.4 291">
  <defs>
    <pattern width="100%" height="100%" id="p1">
    <image xlink:href="Sample.jpg" width="742" height="451" />
    </pattern>
  </defs>
  <text style="font-family:'Arial Black';font-size:100px;fill:url(#p1);stroke:black">
    <tspan x="0" y="80">BACK</tspan>
    <tspan x="0" y="180">GROUND</tspan>
    <tspan x="0" y="280">FILLER</tspan>
  </text>
</svg>

Wird das SVG direkt ins HTML eingebettet, kann man den Namespace

  • xmlns=“http://www.w3.org/2000/svg“
  • xmlns:xlink=“http://www.w3.org/1999/xlink“

auch weglassen.

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