repeating-conic-gradient()

The CSS repeating-conic-gradient() function creates a color gradient that repeats itself as a pattern around a circle. We define a section of the gradient, which is then repeated until it fills the entire available space.

.element {
  background-image: repeating-conic-gradient(from 45deg in oklch, #231942, #be95c4 20deg, #231942 40deg);
}

Since gradients are actually images generated by the browser, it’s mainly used with the background-image property to create colorful backgrounds.

The repeating-conic-gradient() function is defined in the CSS Images Module Level 4 specifications.

Related Guides: CSS Gradients, CSS Color Functions

Syntax

repeating-conic-gradient([from [ <angle> | <zero> ] at <position> <color-interpolation-method>]?, <angular-color-stop-list>)

We’ll break down these arguments one by one, but this essentially means that a repeating conical gradient is produced with an angle, a position, and a color space. Then we can choose and place the colors used in the gradient, and they repeat as much as needed.

Arguments

/* Basic Gradients */
repeating-conic-gradient(cyan, magenta, cyan);
repeating-conic-gradient(red 90deg, purple 180deg, red);
/* Gradient angles */
repeating-conic-gradient(from 20deg, white, black, white);
repeating-conic-gradient(from 0.5turn, blue, yellow, blue);
/* Gradient positions */
repeating-conic-gradient(at right bottom, yellow, green, yellow);
repeating-conic-gradient(at 60px 20%, coral, orange, coral);
/* Interpolation method */
repeating-conic-gradient(in oklab, #ff0, hsl(120 100 50), yellow);
repeating-conic-gradient(in lch longer hue, yellow, blue, yellow);
/* All together */
repeating-conic-gradient(from 40deg at left top in hsl longer hue, yellow 50deg, oklch(0.87 0.14 99) 100deg, yellow);

from <angle> | <zero>

Colors are placed around a circle, which can be rotated by a certain degree to turn the whole gradient. It works by writing the from keyword followed by the <angle> to rotate the gradient. If not defined, it defaults to 0deg.

at <position>

Defines the center of the gradient. To use it, we write the at keyword followed by the <position> syntax for each axis. This includes relative values like 40% 20%, absolute units like 30px 100px, and physical values like left top, center or right bottom. If omitted, it defaults to center. Logical values seem not to be allowed.

<angular-color-stop-list>

Defines the colors used and their position on the gradient, all in a comma-separated list. Each color stop has a given <color> followed by two optional <angle-percentage> values. While they are optional, if we don’t specify any angle, then it will work like a regular ol’ conic-gradient().

• A single <color> value lets CSS decide where to place the color.
• A <color> <angle-percentage> value defines where the given color should be found.
• Lastly, <color> <angle-percentage> <angle-percentage> defines a starting and ending angle for the color to appear.

Usually, we will define at least one angle for each color. Then the colors will be repeated until they fill the gradient.

<color-interpolation-method>

Defines the color space used and the path taken between one color to another. To use it, we start with the in keyword followed by one of the many color spaces defined in CSS:

<color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]
<rectangular-color-space> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65
<polar-color-space> = hsl | hwb | lch | oklch

It can be either written at the beginning of conic-gradient() or just before defining the <angular-color-stop-list>.

If the color space uses polar coordinates (hsl, hwb, lch and oklch), then we can also define the path taken by the gradient using the <hue-interpolation-method> syntax.

Basic usage

The repeating-conic-gradient() function takes the same arguments as the regular conic-gradient() function, so every conic gradient also works as a repeating conic gradient. However, if we create a gradient with only color stops and no defined angles…

.element {
    background: repeating-conic-gradient(cyan, magenta, cyan);
}

…then you’ll notice that, while it works, it’s missing the “repeating” part and simply displays a regular conic gradient.

This happens because CSS places each color equidistantly, so it would be the same as writing this instead:

.element {
  background: repeating-conic-gradient(cyan 0deg, magenta 180deg, cyan 360deg);
}

Tip: The repeating-conic-gradient() function returns an <image> type, meaning it’s used within the background-image (or background) property rather than, say, the background-color property, which does not support CSS gradient functions.

To make the gradient repeat, we only have to define a section of the gradient as opposed to the entire thing. For example, we could make the gradient repeat four times by positioning colors in the first quarter of the gradient:

.element {
  background: repeating-conic-gradient(cyan, magenta, cyan 90deg);
  /* same as */
  background: repeating-conic-gradient(cyan 0deg, magenta 45deg, cyan 90deg);
}

And now our repeating-conic-gradient() is, well, repeating!

I used degrees here, but we can use any other <angle-percentage> unit inside conic gradients, such as:

• Degrees (deg)
• Gradians (grad)
• Percentages (%)
• Radians (rad)
• Turns (turn)

Find more information about working with different units in our CSS Length Units Guide.

Moving and rotating work the same

While color stops work differently in repeating-conic-gradient(), everything else works the same as in its non-repeating counterpart, namely, rotating the gradient and moving its center.

We can turn the whole gradient with the from keyword followed by an <angle>. This shifts the starting position (initially at 12:00 if we’re looking at the hands of an clock) where colors emerge.

.deg0 {
  /* default is 0deg */
  background: repeating-conic-gradient(fuchsia 0deg, purple 60deg, fuchsia 120deg);
}
.deg30 {
  background: repeating-conic-gradient(from 30deg, fuchsia 0deg, purple 60deg, fuchsia 120deg);
}
.deg60 {
  background: repeating-conic-gradient(from 60deg, fuchsia 0deg, purple 60deg, fuchsia 120deg);
}
.deg90 {
  background: repeating-conic-gradient(from 90deg, fuchsia 0deg, purple 60deg, fuchsia 120deg);
}

Moving the gradient’s center follows a similar process, but this time we’ll use the at keyword followed by the <position> syntax, relative to the gradient’s box top-left corner.

Knowing this, we can position the center through:

• Physical values (e.g., right center)
• Lengths (e.g., 100px 40px)
• Percentages (e.g., 80% 60%)
• Values outside the gradient box (e.g., -30px 110%)

/* Physical value */
background: repeating-conic-gradient(at right center, /* color stops */);
/* Lengths */
background: repeating-conic-gradient(at 100px 40px, /* color stops */);
/* Percentages */
background: repeating-conic-gradient(at 80% 60%, /* color stops */);
/* Negative and values above 100% */
background: repeating-conic-gradient(at -30px 110%, /* color stops */);

Logical position values — like start and block-end — don’t seem to work inside repeating-conic-gradient(), at least in my tests.

Hard color stops

We can also get solid colors in a repeating-conic-gradient() by defining them through hard color stops. The trick is to stop each color right after the next color begins, giving no space in between for the gradient to exist. For example, the next gradient hard stops between white and red, and then repeats itself four times:

.element {
  background: repeating-conic-gradient(#ea5b5b 0deg 45deg, #d4d9d9 45deg 90deg, #ea5b5b 90deg);
}

Even better patterns

Using repeating-conic-gradient(), we can simplify further some background patterns. For example, it’s possible to make a checkboard pattern using conic-gradient() and hard stops, by filling each quarter of the gradient with a tile:

.element {
  background-image: conic-gradient(#f0d9b5 25%, #b58863 0% 50%, #f0d9b5 50% 75%, #b58863 75%);
}

However, we have to repeat ourselves and write the color stops from the second half too. While using repeating-conic-gradient(), we just have to define the first half and let it repeat itself:

.element {
    background: repeating-conic-gradient(#f0d9b5 0% 25%, #b58863 25% 50%);
}

What’s left is to reduce the size of the background using background-size, and because the background-repeat property is set to repeat by default, it will fill the whole element, repeating the checkboard pattern.

.element {
    background: repeating-conic-gradient(#f0d9b5 0% 25%, #b58863 25% 50%);
    background-size: 100px 100px;
}

There are many more patterns done through gradients, and Ana Tudor has an amazing post showcasing some of them easily achievable by conic gradients and hard stops

Demo

Specification

The repeating-conic-gradient() function and color interpolation methods are defined in the CSS Images Module Level 4, which is currently in Editor’s Draft.

Browser support

Both the repeating-conic-gradient() and its interpolation methods syntax are supported across all browsers.

More information

• Conic Gradient (Color Gradient)
• Introduction to Conic Gradients in CSS (Digital Ocean)
• CSS Conic Gradient Effects (Follow Andrew)

Related