CSS repeating-conic-gradient() Function

Example

Create a repeating conic gradient:

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
}

The repeating-conic-gradient() function is used to create a repeating conic gradient.

Supported Versions: CSS3

The numbers in the table specify the first browser version that fully supports the function.

Function	Chrome	Edge	Firefox	Safari	Opera
repeating-conic-gradient()	69.0	79.0	83.0	12.1	56.0

background-image: repeating-conic-gradient([from angle] [at position,] color degree, color degree, ...);

Value	Description
from angle	Optional. The starting angle. Default is 0deg.
at position	Optional. The center position. Default is center.
color degree, ..., color degree	The conic gradient stops. This value contains a color value, followed by an optional stop position (a degree between 0 and 360 or a percentage between 0% and 100%).

Set a repeating conic gradient with starting and stopping colors:

#grad {
  background-image: repeating-conic-gradient(red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}