repeating-conic-gradient() CSS Function

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

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(
    45deg,
    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.

Syntax

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

Values

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%).

Example

HTML

<div id="grad1"></div>

CSS

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

}

Result

Editor