CSS/Funktionen/repeating-linear-gradient()

Die repeating-linear-gradient()-Funktion legt einen sich wiederholenden linearen Farbverlauf fest.

Parameter	siehe linear-gradient()
anwendbar auf	background-image, border-image, list-style-image, mask-image
Browsersupport	caniuse: css-gradients

Beispiel

#one {
  background-image: repeating-linear-gradient(90deg, gold, blue);
}
#two { 
  background-image: repeating-linear-gradient(90deg, gold, blue 10%);
}
#three { 
  background-image: repeating-linear-gradient(90deg, gold, blue 5%, gold 10%);
}

1. repeating-linear-gradient(gold, blue) = repeating-linear-gradient(gold 0 , blue 100%). Das heißt, es erfolgt lediglich eine Wiederholung des Verlaufs.
2. Wenn Anfang und Ende des Verlaufs verschiedene Farben haben, so wird es einen scharfen Übergang geben, da die Verläufe einfach nur aneinander gereiht werden.
3. Falls Sie mit prozentualen Längenangaben arbeiten, müssen Sie die Angaben durch die Anzahl der gewünschten Wiederholungen dividieren.

Weblinks

• W3C: Linear Gradients: the repeating-linear-gradient() notation
• MDN: repeating-linear-gradient()

Siehe auch

• CSS/Tutorials/Hintergrund/Verläufe
  • repeating-linear-gradient()
• Tricks mit border-image Rahmen mit Verlauf
• Masken und Beschneidungen/Masken
  • mask-image Teiltransparente Bereiche