CSS repeating-conic-gradient() Function

The repeating-conic-gradient() function allows you to create a repeating conic gradient using CSS.

It works exactly the same way as the standard conic-gradient() function, except that it automatically repeats the color stops infinitely to fill the entire 360 degree area.

To create a repeating conic gradient, use the repeating-conic-gradient() function as a value to any property that accepts images (for example, background-image, background, or border-image properties).

For the gradient to actually repeat, your color stops must span a size that is less than 360 degrees (or 100%). The browser will then repeat that pattern until the entire shape is filled. Like this:

Hard Color Stops (Starburst Patterns)

By using hard color stops (where one color ends at the exact same position the next color begins), you can easily create starburst patterns, optical illusions, or checkerboards.

Here is an example of a starburst pattern created using hard color stops that repeat every 30 degrees:

Positioning the Center and Angle

Just like the standard conic-gradient(), you can change the starting angle using the from keyword, and you can change the center point of the gradient using the at keyword.

Here's an example of starting the gradient at 45 degrees and moving the center point to the left side:

Official Syntax

The official syntax of the repeating-conic-gradient() function is as follows:

Where <angular-color-stop-list> is defined as:

Possible Values

As indicated in the official syntax, the repeating-conic-gradient() function accepts the following values:

angle

Preceded by the from keyword, this specifies the starting angle of the gradient. For example, from 45deg.

position

Preceded by the at keyword, this specifies the center point of the gradient. It uses the same syntax as the background-position property. For example, at 50% 50% or at bottom right.

angular-color-stop-list

A list of color stops. An angular color stop is a color value, followed by an optional stop position (or two stop positions, which will create a solid color band). The stop position can be provided as a percentage or an angle (e.g., deg, turn).

CSS Specifications

• The repeating-conic-gradient() function is defined in CSS Image Values and Replaced Content Module Level 4 (Editor’s Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.