CSS/Funktionen/repeating-linear-gradient()

Browserunterstützung
caniuse.com

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

anwendbar auf

background-image, border-image, list-style-image, mask-image

Parameter

siehe linear-gradient()

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.

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

Weblinks

• W3C: Linear Gradients: the repeating-linear-gradient() notation
• MDN: repeating-linear-gradient()
• Browser-Support: caniuse.com