CSS: Farbverlauf erstellen!

Farbverläufe mit CSS sind ein einfaches Mittel, dezent etwas Farbe auf die Webseite zu bringen. Mit einem CSS Farbverlauf kann man aber auch ein Bild am oberen oder unteren Rand abdunkeln und Text lesbarer machen. Den CSS Farbverlauf erstellt mal als Hintergrund-Bild (background-image) eines Objektes: Dabei kann man entweder einen Verlauf zwischen zwei oder mehr Farben erstellen oder mit Transparenz arbeiten: Damit kann man dann zum Beispiel eine Farbe auslaufen lassen.

CSS Farb-Verlauf: zwei Farben

Mit zwei Farben sieht der Code für einen CSS Farb-Verlauf so aus:

background-image: linear-gradient(Winkel, Farbe 1, Farbe 2);

Der Winkel kann neben der Grad-Zahl für die Drehung auch einer der folgenden Werte sein:

• to right
• to left
• to top
• to bottom

So kann der Farbverlauf zum Beispiel so aussehen:

background-image: linear-gradient(to bottom, red, yellow);

oder:

 
CSS Verlauf mit vier Farben

Mit vier Farben statt zwei Farben sieht der Code für den Verlauf so aus:

background-image: linear-gradient(to bottom, red, yellow, green, blue);

 
Eigene Farben (hexadezimal)

Statt den festen Farben kann man auch hexadezimale Farbwerte für eigene Farben nutzen:

background-image: linear-gradient(to bottom, #CCCCCC, #000000);

 
CSS Farbverlauf mit Transparenz

Hier wird die Farbe als rgba() definiert: die ersten drei Werte stehen dabei für den RGB Wert (rot, grün und blau), der vierte Werte für die Transparenz. Dieser Wert kann zwischen 0 (komplett transparent) und 1 (komplett sichtbar) gesetzt werden.

background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));

Dies sieht auf einem Bild noch besser aus:

Nicht so gut lesbar

Besser lesbar dank Verlauf im Hintergrund

Der Code für das Beispiel mit dem Verlauf über dem Bild kann zum Beispiel so aussehen:

<div style="position:relative;">
   <img src="https://www.computerhilfen.de/info/wp-content/uploads/2019/05/css-farbverlauf-beispiel.jpg" alt="CSS Farbverlauf (Beispiel)" width="300" height="300" class="aligncenter size-full wp-image-31320" />
   <div style="width:300px;height:100px;position:absolute;left:0px;bottom:0px;background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));">
      <div style="color:#FFFFFF;font-family:arial;position:absolute;left:5px;bottom:2px;font-size:12px;">Besser lesbar dank Verlauf im Hintergrund</div>
   </div>
</div>