Repeating Gradients – sich wiederholende CSS-Verläufe

Mit Hilfe von CSS-Verläufen lassen sich erstaunliche Effekte erzeugen. Es ist beispielsweise möglich Oberflächen zu simulieren oder Plastizität zu erzeugen. Mit sich wiederholenden Verläufen (Repeating Gradients) stehen darüber hinaus noch deutlich komplexere Gestaltungsmöglichkeiten zur Verfügung. Es lassen sich u.a. komplexe Muster erzeugen.

Linearer, sich wiederholender Verlauf

Der repeating-linear-gradient verläuft geradlinig von A nach B und kann über einen Winkel gedreht werden. Mit Hilfe von Farbunterbrechungen ist es möglich Muster zu erzeugen. Die Farbunterbrechung der letzten Farbe bestimmt wie schnell der Verlauf wiederholt werden soll.

background-image: repeating-linear-gradient(90deg, white 0, black 100px);

Demo anschauen

Flexibler Verlauf

Es ist auch möglich die Farbunterbrechungen in Prozent anzugeben.

background-image: repeating-linear-gradient(90deg, white 0%, black 25%);

Demo anschauen

Verlauf mit mehreren Farbunterbrechungen

Je mehr Farbunterbrechungen verwendet werden, desto komplexere Muster sind möglich. Achtet darauf, dass die Farbunterbrechungen entweder alle in Pixeln oder alle in Prozent angegeben werden müssen.

background-image: repeating-linear-gradient(90deg, white 10px, silver 20px, lightslategray 30px, grey 40px, black 50px, lightslategray 60px, silver 70px, white 80px);

Demo anzeigen

Radialer, sich wiederholender Verlauf

Auch ein kreisförmiger Verlauf kann erstellt werden. Wie bei den linearen Verläufen sind mehrere Farbunterbrechungen sowie die Angabe der Farbunterbrechnung in Prozent möglich. Als Winkel wird circle angegeben um den Verlauf vom Mittelpunkt aus zu beginnen.

background-image: repeating-radial-gradient(circle, silver, black 50px);

Demo anzeigen

Komplexe Muster mit sich wiederholenden CSS-Verläufen

Mit Hilfe der CSS-Eigenschaft background-size können Hintergrundbilder auf eine bestimmte Größe transformiert werden. Da ein Verlauf in CSS als Bild behandelt wird, lassen sich mit background-size interessante Effekte erzielen.

background-image: repeating-radial-gradient(circle, darkblue, blue, aqua, white 6px);
background-size: 50px 50px;

Demo anzeigen

Browser-Support für Repeating Gradients

Der Browsersupport für Repeating Gradients ist ab dem IE10 gegeben. Eine detaillierte Zusammenfassung entnehmt ihr bitte der Website Can I Use. Aktuell rendert Chrome die Verläufe allerdings deutlich stufiger als Safari oder Firefox.