Funkcja CSS repeating-radial-gradient()

Definicja i użycie

CSS repeating-radial-gradient() Funkcja do powtarzającej się radialnej gradient.

Radialna gradient:	Powtarzająca się radialna gradient:

radial-gradient(red, yellow, green);	repeating-radial-gradient(red, yellow 10%, green 15%);

Powtarzająca się radialna gradient:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Inny powtarzający się gradient radialny, ustawiony na kształt, rozmiar i pozycję:

#grad1 {
  background-image: repeating-radial-gradient(ellipse farthest-corner at 25% 25%, red, yellow 10%, green 15%);
}

Inny powtarzający się gradient radialny, ustawiony na dwa punkty końcowe kolorów:

#grad1 {
  background-image: repeating-radial-gradient(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

repeating-radial-gradient(shape size at position, start-color, ... , last-color);

Wartość	Opis
shape	Definiuje kształt gradientu. Możliwe wartości: ellipse (domyślnie) circle
size	Definiuje rozmiar gradientu. Możliwe wartości: farthest-corner (domyślnie) closest-side closest-corner farthest-side
at position	Definiuje pozycję gradientu. Domyślna wartość to "center".
start-color, ... , last-color	Punkty końcowe kolorów to kolory, między którymi ma być prezentowany płynny przejście. Ta wartość składa się z wartości koloru i jednego lub dwóch opcjonalnych miejsc zatrzymania (procenty między 0% a 100% lub długość wzdłuż osi gradientu).