CSS: Text mit Farbverlauf (ohne Bild)!

Mit HTML und CSS lassen sich Texte ganz einfach mit einem Farbverlauf belegen. Dieser wird dann statt der eigentlichen Textfarbe angezeigt und von allen großen Browsern unterstützt. Das sieht vor allem bei Überschriften sehr schick aus, wenn man es mit dem Farbverlauf nicht übertreibt.

Achtung: Hierbei handelt es sich um reinen Text, es wird kein Bild benutzt. Das kann aus SEO Sicht wichtig sein, wenn der Text auch für Maschinen lesbar sein soll. Der Text bekommt allerdings ein Hintergrundbild, dass aus dem Farbverlauf besteht. Statt einem richtigen Bild kann man aber auch direkt in CSS einen Farbverlauf anlegen, indem man die Start- und die End-Farbe angibt.

So sieht es aus: Dieser Text ist immer noch markier- und kopierbar, statt einer einfachen Farbe wird aber ein Verlauf gezeigt:

Text mit CSS Farbverlauf!

 
Das ist der Code dafür:

<b style="font-size:27px;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-color: #ba254c;
   background-image: linear-gradient(to right,#ba254c 30%,#392ea4 70%);
   background-size: cover;
   background-position: center center;">Text mit CSS Farbverlauf!</b>

Die Zeilen 2 und 3 sind wichtig für den Safari Browser von Apple (der Standardbrowser unter macOS und iOS): Ohne diese Zeilen würde der Text in der Standard-Textfarbe über farbigem Hintergrund gezeigt.

Anschließend wird die Hintergrundfarbe und dann der Verlauf definiert: Hier lassen sich die Farben für den Verlauf einstellen, mit denen der Text dann eingefärbt wird.

Farbverlauf als CSS Klasse

Wenn man den Farbverlauf nach dem eigenen Geschmack und mit den eigenen Farben angepasst hat, kann man den Code auch ganz einfach in eine CSS Klasse auslagern:

<style type="text/css">
   .verlauf {
   font-size:27px;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-color: #ba254c;
   background-image: linear-gradient(to right,#ba254c 30%,#392ea4 70%);
   background-size: cover;
   background-position: center center;
   }
<style>

<b class="verlauf">Text mit CSS Farbverlauf!</b>