Genauso wie ein Element in CSS3 mehrere Hintergrundbilder haben kann (siehe auch folgenden Beitrag), können auch mehrere Farbverläufe miteinander kombiniert werden, womit sich dann Muster erzeugen lassen wie beispielsweise Kacheln oder Punkte.

Gekachelte Muster erzeugen

In diesem Beispiel werden mit linear-gradient zwei Hintergrundfarbverläufe miteinander kombiniert.

Hintergrundverläufe kombinieren

kombinierter Hintergrundverlauf

Erläuterung: Oben liegt der erste Hintergrund der von rechts nach links geht und mit grün beginnt und transparent endet. Darunter liegt der zweite Hintergrund der standardmäßig oben mit gelb beginnt und gleichzeitig durch die transparente Farbe durchscheint und mit rot unten endet. Mit dieser Ausgangsbasis lassen sich gekachelte Muster aufbauen.

Farbverlauf mit Muster

Verlauf mit Quadrate-Muster

Erläuterung: Durch die Transparenz mit rgba siehe auch dieser Beitrag entsteht der Effekt mit der hellgrünen Farbe.

Mit background-size hat man darüber hinaus Einfluss auf die Größe des Musters, welches wir hier an dieser Stelle einmal etwas kleiner machen:

Hintergrund im Tischdeckenmuster

Hintergrund mit kleinen Kacheln

Und schon erhält man ein wunderschönes Muster in Tischdecken-Optik ;-))

Punkte-Muster erzeugen

Aber das war noch nicht alles! Auch Punkte-Muster lassen sich mit CSS3 erstellen. Dieses Mal nutzen wir den Befehl radial-gradient:

Punkte-Muster

Punkte-Muster