CSS repeating-conic-gradient() Function

CSS repeating-conic-gradient() Function

The CSS repeating-conic-gradient() function creates an image with a repeating pattern of colors arranged around a central point.

Colors transition around the center using angular or percentage-based color stops. The pattern repeats automatically, making the function useful for striped circles, decorative backgrounds, radial patterns, and repeating color segments.

Syntax

repeating-conic-gradient(color-stop, color-stop, ...)
repeating-conic-gradient(from angle, color-stop, ...)
repeating-conic-gradient(at position, color-stop, ...)
repeating-conic-gradient(from angle at position, color-stop, ...)
repeating-conic-gradient(in color-space, color-stop, ...)

The function requires at least two color stops. A starting angle, center position, and color interpolation method are optional.

For example:

background: repeating-conic-gradient(red 0deg 30deg, blue 30deg 60deg);
background: repeating-conic-gradient(from 45deg, red 0deg, blue 90deg);
background: repeating-conic-gradient(at 30% 50%, red 0deg, blue 45deg);
background: repeating-conic-gradient(in oklch, red 0deg, blue 90deg);

The function returns a CSS <image> value rather than a color value.

It can be used with properties that accept images, including background-image and background.

Parameters

The repeating-conic-gradient() function accepts color stops and optional settings that control the gradient's appearance.

For example:

repeating-conic-gradient(from 30deg at center, #0066cc 0deg, #00a896 60deg)

This starts the gradient at 30 degrees, centers it within the element, and repeats the transition between the two colors every 60 degrees.

How It Works

A repeating conic gradient distributes colors around a central point, with angles measured clockwise from the top.

Unlike a linear gradient, which changes colors along a straight line, a conic gradient changes colors as the angle around its center increases.

For example:

.box {
  background: repeating-conic-gradient(
    #0066cc 0deg,
    #00a896 45deg
  );
}

The first color begins at 0 degrees and transitions to the second color at 45 degrees.

The pattern then repeats every 45 degrees, completing eight repetitions around the full 360-degree circle.

The first and last specified color stops determine the length of the repeating pattern.

When the pattern is shorter than one complete revolution, it repeats to fill the entire gradient.

Color Stops

Color stops define the colors used in the gradient and the angular positions where they occur.

For example:

background: repeating-conic-gradient(
  red 0deg,
  yellow 30deg,
  blue 60deg
);

The gradient transitions from red to yellow and then to blue over a 60-degree interval.

That sequence repeats six times around the center.

Color stops can also use percentages:

background: repeating-conic-gradient(
  red 0%,
  yellow 10%,
  blue 20%
);

For conic gradients, 100% represents a complete 360-degree revolution.

Therefore, 20% corresponds to 72 degrees, and this pattern repeats five times.

When a color stop has no explicit position, the browser determines its position according to the CSS gradient color-stop rules.

Angles and Direction

Conic gradient angles begin at the top and increase clockwise.

For example:

background: repeating-conic-gradient(
  red 0deg 15deg,
  blue 15deg 30deg
);

This creates alternating red and blue angular sections, with a complete repeating interval of 30 degrees.

The function also accepts angle units such as turn, rad, and grad.

For example:

background: repeating-conic-gradient(
  red 0turn,
  blue 0.25turn
);

A quarter turn equals 90 degrees, so the pattern repeats four times around the center.

Starting Angle

The optional from keyword changes the starting angle of the gradient.

For example:

background: repeating-conic-gradient(
  from 45deg,
  red 0deg 30deg,
  blue 30deg 60deg
);

The entire repeating pattern is rotated 45 degrees clockwise from its default starting direction.

Another example:

background: repeating-conic-gradient(
  from 90deg,
  #0066cc 0deg,
  #00a896 60deg
);

The pattern begins at the right side instead of the top.

The from angle rotates the gradient's coordinate system without changing the angular distances between color stops.

Center Position

The optional at keyword controls the center around which the colors rotate.

By default, the gradient is centered within its image box.

For example:

background: repeating-conic-gradient(
  at center,
  red 0deg,
  blue 45deg
);

The center can be moved using percentages:

background: repeating-conic-gradient(
  at 25% 50%,
  red 0deg,
  blue 45deg
);

This places the center one-quarter of the way across the image and halfway down.

Position keywords are also supported:

background: repeating-conic-gradient(
  at top left,
  red 0deg,
  blue 45deg
);

Moving the center changes how the angular pattern appears within the element, particularly when the center is near an edge or corner.

Repeating Patterns

The repeating interval is determined by the difference between the first and last color-stop positions.

For example:

background: repeating-conic-gradient(
  red 0deg,
  blue 90deg
);

The pattern repeats every 90 degrees, producing four repetitions around a full circle.

Changing the final stop changes the repetition frequency:

background: repeating-conic-gradient(
  red 0deg,
  blue 30deg
);

This pattern repeats every 30 degrees, producing twelve repetitions.

Smaller angular intervals create more repetitions, while larger intervals create fewer.

For example:

background: repeating-conic-gradient(
  #0066cc 0deg 10deg,
  #ffffff 10deg 20deg
);

This produces 18 alternating pairs of blue and white sections around the center.

If the repeating interval has zero length, the gradient becomes a solid color based on its final color stop.

Hard Color Stops

Hard color stops create sharp boundaries between colors instead of smooth transitions.

For example:

background: repeating-conic-gradient(
  #0066cc 0deg 20deg,
  #ffffff 20deg 40deg
);

Each color occupies a 20-degree section with an immediate change at the boundary.

Two positions can be assigned to a single color stop, allowing the color to remain constant over an angular interval.

Another example:

background: repeating-conic-gradient(
  #0066cc 0deg 15deg,
  #00a896 15deg 30deg,
  #f59e0b 30deg 45deg
);

This creates three distinct colored sections that repeat every 45 degrees.

Hard color stops are useful for decorative wheels, segmented patterns, and radial stripes.

Color Interpolation

Color interpolation determines how intermediate colors are calculated between color stops.

Modern CSS supports explicit color spaces in gradients using the in keyword.

For example:

background: repeating-conic-gradient(
  in oklab,
  red 0deg,
  blue 90deg
);

This interpolates colors in the Oklab color space.

Another example:

background: repeating-conic-gradient(
  in oklch longer hue,
  red 0deg,
  blue 90deg
);

The longer hue setting specifies how hue values travel around the color wheel.

Supported interpolation spaces include srgb, srgb-linear, lab, lch, oklab, and oklch.

The chosen color space can noticeably affect the colors between stops, especially when transitioning between saturated colors.

Browser support for explicit interpolation syntax should be checked separately from basic repeating conic gradient support.

Transparency

Transparent colors can be used to create repeating patterns that reveal an underlying background.

For example:

.box {
  background-color: #f1f3f5;
  background-image: repeating-conic-gradient(
    rgba(0, 102, 204, 0.8) 0deg 15deg,
    transparent 15deg 30deg
  );
}

The transparent sections allow the background color to remain visible.

Transparent patterns can also be layered over other gradients:

.box {
  background-image:
    repeating-conic-gradient(
      rgba(255, 255, 255, 0.25) 0deg 10deg,
      transparent 10deg 20deg
    ),
    linear-gradient(135deg, #0066cc, #00a896);
}

The first gradient creates the repeating transparent pattern, while the second provides the underlying color transition.

Background layers are painted in the order listed, with the first image on top.

conic-gradient() vs. repeating-conic-gradient()

Both functions create angular color transitions, but only repeating-conic-gradient() automatically repeats the defined pattern.

For example, a nonrepeating gradient:

background: conic-gradient(
  red 0deg,
  blue 90deg
);

The transition reaches blue at 90 degrees, and the remaining area retains the final color.

By comparison:

background: repeating-conic-gradient(
  red 0deg,
  blue 90deg
);

The red-to-blue transition repeats every 90 degrees around the entire circle.

Use conic-gradient() for a single angular progression and repeating-conic-gradient() for repeating angular patterns.

Example

This example creates a repeating angular gradient with smooth transitions between blue and teal.

HTML:

<div class="repeating-conic-demo">
  <div class="repeating-conic-demo-circle"></div>
</div>

CSS:

.repeating-conic-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #f1f3f5;
}
.repeating-conic-demo-circle {
  width: 220px;
  height: 220px;
  max-width: 100%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    #0066cc 0deg,
    #00a896 45deg,
    #0066cc 90deg
  );
}

The gradient transitions from blue to teal and back to blue over a 90-degree interval.

Because the pattern repeats every 90 degrees, it appears four times around the circle.

The border-radius: 50% declaration makes the element circular. The gradient itself remains an image that fills the element's background area.

Striped Circle Example

This example creates a repeating pattern of sharply separated blue and white angular stripes.

HTML:

<div class="repeating-conic-stripes-demo">
  <div class="repeating-conic-stripes-circle"></div>
</div>

CSS:

.repeating-conic-stripes-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #f1f3f5;
}
.repeating-conic-stripes-circle {
  width: 220px;
  height: 220px;
  max-width: 100%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    #0066cc 0deg 15deg,
    #ffffff 15deg 30deg
  );
}

Each blue section occupies 15 degrees, followed by a white section occupying another 15 degrees.

The complete pattern repeats every 30 degrees, creating twelve blue sections and twelve white sections around the circle.

The paired color-stop positions produce sharp transitions rather than blended colors.

Common Uses

The repeating-conic-gradient() function is useful for creating repeating angular patterns without external images.

For example:

.striped-circle {
  background: repeating-conic-gradient(
    #0066cc 0deg 10deg,
    #ffffff 10deg 20deg
  );
}
.color-wheel {
  background: repeating-conic-gradient(
    red 0deg,
    yellow 30deg,
    blue 60deg
  );
}
.transparent-pattern {
  background: repeating-conic-gradient(
    #0066cc 0deg 15deg,
    transparent 15deg 30deg
  );
}

These examples demonstrate hard stripes, blended color transitions, and transparent repeating sections.

Limitations

The repeating-conic-gradient() function has several important rules and limitations.

• At least two color stops are required.
• Color-stop positions must use angles or percentages, not ordinary length values.
• The pattern repeats according to the interval between the first and last color stops.
• It creates an image value, not a standalone CSS color value.
• It does not automatically create a circular element.
• Very small repeating intervals can create dense patterns or visible rendering artifacts.
• Hard color boundaries can appear slightly different because of antialiasing.
• Explicit color interpolation syntax may have different browser support from the basic function.
• It is not a replacement for semantic charts or accessible data visualizations.
• Fallback backgrounds are recommended when supporting older browsers.

For example, this is valid:

background: repeating-conic-gradient(
  red 0deg,
  blue 45deg
);

The following is invalid because it supplies only one color stop:

background: repeating-conic-gradient(red);

The following is invalid because conic gradient color-stop positions cannot use pixel lengths:

background: repeating-conic-gradient(
  red 0px,
  blue 50px
);

Use angular or percentage positions and ensure the repeating interval produces the intended visual pattern.

Browser Support

The CSS repeating-conic-gradient() function is Baseline Widely available and is supported by modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

It does not require vendor prefixes in modern browsers.

For example:

.box {
  background-color: #0066cc;
  background-image: repeating-conic-gradient(
    #0066cc 0deg 15deg,
    #ffffff 15deg 30deg
  );
}

Browsers supporting the function display the repeating angular pattern. Unsupported browsers retain the solid background color.

Feature detection can also be used:

@supports (background-image: repeating-conic-gradient(red 0deg, blue 90deg)) {
  .box {
    background-image: repeating-conic-gradient(
      red 0deg,
      blue 90deg
    );
  }
}

For current compatibility information, visit Can I Use? and search for CSS conic gradients.

Specifications

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

The specification defines conic gradient geometry, color-stop positioning, repetition, and related gradient behavior.

Related CSS functions include conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), linear-gradient(), and radial-gradient().