CSS repeating-radial-gradient() function

Definition and usage

CSS repeating-radial-gradient() Function used for repeating radial gradients.

Radial gradient	Repeated radial gradient

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

A repeated radial gradient:

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

Another repeated radial gradient, setting shape size and position:

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

Another repeated radial gradient, setting two color stopping points:

#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);

Value	Description
shape	Define the shape of the gradient. Possible values: ellipse (default) circle
size	Define the size of the gradient. Possible values: farthest-corner (default) closest-side closest-corner farthest-side
at position	Define the position of the gradient. The default value is "center".
start-color, ... , last-color	Color endpoints are the colors you want to present with smooth transitions between them. This value consists of a color value and one or two optional stopping points (percentages between 0% and 100% or lengths along the gradient axis).