repeating-conic-gradient() CSS Function


The CSS repeating-conic-gradient() function is used to create a repeating conic gradient. A conic gradient is a gradient with color transitions rotated around a center point, rather than radiating from the center. A repeating conic gradient is created by specifying a rotation angle, the center of the gradient, and then specifying a list of color-stops. The color-stops are specified with an <angle>, which can be in degrees, gradians, radians, or turns.

The repeating-conic-gradient() function is similar to the conic-gradient() function, but the repeating-conic-gradient() function will repeat the gradient around the center point, rather than just rendering a single gradient.

The repeating-conic-gradient() function can be used to create a variety of effects, such as:

  • Color wheels
  • Pie charts
  • Swirling backgrounds
  • Hypnotic patterns

Here is an example of how to use the repeating-conic-gradient() function:

.element {
  background-image: repeating-conic-gradient(
    red 0deg 30deg,
    yellow 30deg 60deg,
    green 60deg 90deg,
    blue 90deg 120deg,
    purple 120deg 150deg

This will create a repeating conic gradient with five colors: red, yellow, green, blue, and purple. The gradient will be rotated 45 degrees clockwise.


&lt;repeating-conic-gradient()&gt; = repeating-conic-gradient([from angle] [at position,] color degree, color degree, ...);


  • from angleThe entire conic gradient is rotated by this angle. Default value is 0deg. Optional.
  • at positionSpecifies the gradient center of the conic gradient. Default value is center. Optional.
  • color degreeColor stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a degree between 0 and 360 or a percent between 0% and 100%).


<div id="grad1"></div>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;

Browser Support

The following table will show you the current browser support for the CSS repeating-conic-gradient() function.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 7th October 2023