Farbverlauf in Schrift mit CSS

Webdesign mit Farbverlauf in Schrift mit CSS

Webdesign für besondere Schrift

Wer auf seiner Website etwas Besonderes für das Aussehen von Schrift erreichen will, kann mit CSS einen Farbverlauf definieren.

Grundsätzlich gibt es zwei Möglichkeiten Farb-Verläufe für Schrift im Webdesign anzulegen:

  • Horizontaler Farbverlauf – von oben nach unten
  • Vertikaler Farbverlauf – von links nach rechts

 

Die Farbangaben für die vertikale Variante erstrecken sich über die gesamte Breite des Containers, in dem z.B. die Headline eingebettet ist. Dieser Container nimmt oft sehr viel mehr Breite ein, als die eigentliche Schrift. Es bedeutet also ein bisschen Aufwand den Container anzupassen.

Ich stelle also hier lieber die horizontale Version vor. Die klappt immer, unabhängig von der Container-Breite!

Horizontaler Farbverlauf für Schrift

Dazu werden verschiedene ‚colors‘ für die Schrift angelegt. Am besten eignen sich Farbverläufe für große oder plakative Schriften.

Zwei Farben stellen natürlich das Minimum für einen Verlauf dar.

In meinem Beispiel soll die Schrift eine Art Glanz erhalten. Das wird durch drei Farben erreicht, die mittlere ist relativ hell und erzeugt so einen optischen Schein. In Webkit-Browsern (Chrome, Safari, Safari mobile, Android Browser) wird das sehr gut dargestellt.

Da nicht alle Browser Farbverläufe unterstützen, definiere ich zuerst eine Schriftfarbe als Fallback, die dann auch für alle kleineren Schriften oder für Icons verwendet werden kann.

Schriftfarbe in CSS:
color: rgb(210,145,127)

CSS für einen Schrift-Farbverlauf:
background: -webkit-linear-gradient(rgb(171,103,95) 15%, rgb(251,213,195) 55%, rgb(171,103,95) 85%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

Erklärung der Prozentzahlen:

Von oben 0% bis 15% die erste dunklere Farbe
Ab 16% bis 84% verläuft linear die hellere Farbe
Von 85% bis 100% wieder die dunkle Farbe

Good luck!

WEBDESIGN KONZEPT
WEB PROGRAMMIERUNG