Seit CSS3 müssen Farbverläufe nicht mehr im Grafikprogramm erstellt werden, sondern können ganz einfach über Code programmiert werden. Sodass sich der Browser damit dann quasi seine eigene Hintergrundgrafik generiert. Grundsätzlich gibt es lineare und radiale Farbverläufe. Hier ein Beispiel für einen linearen Farbverlauf:

Farbverlauf von grün nach gelb

Farbverlauf von grün nach gelb

Der Farbverlauf wird mit dem Befehl background oder background-image eingefügt. Dazu müssen mindestens zwei Farben angegeben werden, natürlich sind auch mehrere möglich.

Farbverlauf grün gelb rot

Farbverlauf grün gelb rot

Standardmäßig werden die Farben gleichmäßig über die zur Verfügung stehenden Fläche verteilt. Dies kann man aber durch einfache Prozentangaben beeinflussen:

Farbverlauf mit %-Angabe

Farbverlauf mit %-Angabe

Der grüne Farbpunkt fängt jetzt erst bei 20% an, der gelbe sitzt bei 70% der Rest wird rot.

Richtung des Farbverlaufs ändern

Standardmäßig erfolgt ein linearer Farbverlauf von oben nach unten, auch dies kann man durch Angabe einer Richtung steuern.

Farbverlauf von rechts nach links

Farbverlauf von rechts nach links

Nun erfolgt der Farbverlauf nicht mehr von oben nach unten, sondern von rechts nach links. Weiter möglich sind Farbverläufe von der einen zur anderen Ecke

Farbverlauf aus der Ecke

Farbverlauf aus der Ecke

Dieser Farbverlauf erfolgt nun von rechts oben nach links unten. Feiner justieren lässt sich das Ganze noch mit Winkel-(also Angaben in Grad) Angaben – bei 180 Grad hätten wir wieder das Standardverhalten (also von oben nach unten) aktiviert.

In diesem Fall verläuft die Farbe von der Ecke rechts unten nach links oben.

Farbverlauf mit Winkel-Angabe

Farbverlauf mit Winkel-Angabe

Anstatt in Grad kann die Einheit aber auch in Turns, also Umdrehungen angegeben werden. Hierbei entspricht 1 Turn 360 Grad (0.125 turn = 45° / 0.5 turn = 180° / usw.).

Farbverläufe wiederholen

Anstatt einen Farbverlauf auf die ganze Fläche zu strecken, kann man mit repeating-linear-gradient diesen immer wieder wiederholen lassen.

sich wiederholender Farbverlauf

sich wiederholender Farbverlauf

Durch sich wiederholende Farbverläufe kann man beispielsweise auch ein Streifenmuster erzeugen:

Streifenmuster

Streifenmuster

Wie man mit CSS3 radiale Farbverläufe und sogar richtige Muster mit Quadraten oder Punkten erzeugen kann, dazu später mehr. Beachten Sie bitte auch, dass andere Browser als der Mozilla Firefox eventuell Vendor-Prefixe benötigen!!

Hier kann man sich Farbverläufe generieren lassen und erhält Code für Muster: