CSS repeating-conic-gradient() function

Definition and usage

CSS repeating-conic-gradient() The function is used for repeating conic gradients.

Example:

Conic gradient Repeated conic gradient
conic-gradient(red, yellow); repeating-conic-gradient(red 10%, yellow 20%);

Example

Example 1

A repeating conic gradient:

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

Try it yourself

Example 2

A repeating conic gradient that defines the starting and ending points of the colors:

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

Try it yourself

Example 3

Another repeating conic gradient with specified start angle and center position:

#grad1 {
  background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

Try it yourself

CSS syntax

repeating-conic-gradient([from angle], [at position,] color degree, color degree, ... );
Value Description
from angle

Optional. The entire conic gradient is rotated by this angle.

Default is 0deg.

at position

Optional. Specifies the center point of the conic gradient.

Default is center.

color degree, ... , color degree

The color termination point is the color you want to present with a smooth transition between them.

This value consists of color values and one or two optional stopping points (angles between 0 to 360 degrees or percentages between 0% to 100%).

Technical details

Version: CSS Images Module Level 4

Browser support

The numbers in the table represent the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
69 79 83 12.1 56

Related pages

Tutorial:CSS gradient

Reference:CSS background-image Property

Reference:CSS conic-gradient() function

Reference:CSS linear-gradient() function

Reference:CSS radial-gradient() function

Reference:CSS repeating-linear-gradient() function

Reference:CSS repeating-radial-gradient() function