CSS repeating-radial-gradient() Function

CSS repeating-radial-gradient() Function

The CSS repeating-radial-gradient() function creates an image with a repeating sequence of colors extending outward from a central point.

It works like radial-gradient(), but repeats the color-stop pattern to create circular or elliptical bands. It is useful for concentric rings, decorative backgrounds, repeating color transitions, and radial patterns created entirely with CSS.

Syntax

repeating-radial-gradient(color-stop, color-stop, ...)
repeating-radial-gradient(shape, color-stop, color-stop, ...)
repeating-radial-gradient(size, color-stop, color-stop, ...)
repeating-radial-gradient(at position, color-stop, color-stop, ...)
repeating-radial-gradient(shape size at position, color-stop, color-stop, ...)
repeating-radial-gradient(in color-space, color-stop, color-stop, ...)

The function requires at least two color stops. The gradient's shape, size, center position, and color interpolation method are optional.

For example:

background: repeating-radial-gradient(red 0px, blue 40px);
background: repeating-radial-gradient(circle, red 0px, blue 40px);
background: repeating-radial-gradient(ellipse at center, red 0px, blue 40px);
background: repeating-radial-gradient(circle at 30% 50%, red 0px, blue 40px);
background: repeating-radial-gradient(in oklab, red 0px, blue 40px);

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

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

Parameters

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

For example:

repeating-radial-gradient(
  circle at center,
  #0066cc 0px,
  #00a896 40px
)

This creates a circular gradient centered within the element, with a blue-to-teal transition repeating every 40px outward from the center.

How It Works

A repeating radial gradient distributes colors outward from a central point.

Unlike a linear gradient, which changes colors along a straight line, a radial gradient changes colors according to distance from its center.

For example:

.box {
  background: repeating-radial-gradient(
    circle,
    #0066cc 0px,
    #00a896 40px
  );
}

The gradient begins with blue at the center and transitions to teal at a distance of 40px.

The color pattern then repeats every 40px along the radial direction.

The result is a series of repeating circular color transitions extending outward.

The first and last color-stop positions determine the length of the repeating interval.

Unlike a nonrepeating radial gradient, the final color does not simply extend to fill the remaining image.

Circle and Ellipse Shapes

The gradient can use a circular or elliptical shape.

The default shape is ellipse.

For example, a circular gradient:

background: repeating-radial-gradient(
  circle,
  red 0px,
  blue 40px
);

This produces repeating circular color bands.

An elliptical gradient:

background: repeating-radial-gradient(
  ellipse,
  red 0%,
  blue 20%
);

This produces repeating elliptical bands based on the gradient's ending shape.

On a rectangular element, the difference between circular and elliptical gradients is usually more noticeable.

For example:

.circle-pattern {
  background: repeating-radial-gradient(
    circle,
    #0066cc 0px 15px,
    #ffffff 15px 30px
  );
}
.ellipse-pattern {
  background: repeating-radial-gradient(
    ellipse,
    #0066cc 0% 10%,
    #ffffff 10% 20%
  );
}

The first declaration creates circular rings, while the second creates elliptical rings.

Size Keywords

Radial gradients support size keywords that determine the dimensions of the ending shape.

For example:

background: repeating-radial-gradient(
  circle closest-side,
  red 0%,
  blue 25%
);

The ending circle reaches the nearest side, and the color-stop percentages are measured relative to that radial size.

Another example:

background: repeating-radial-gradient(
  ellipse farthest-corner,
  red 0%,
  blue 25%
);

The ending ellipse reaches the farthest corner.

Changing the size keyword can change the spacing and appearance of percentage-based repeating patterns.

When color stops use fixed lengths such as pixels, the repeating interval is based on those lengths rather than a percentage of the ending shape.

Center Position

The optional at keyword controls the center from which the gradient extends outward.

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

For example:

background: repeating-radial-gradient(
  circle at center,
  red 0px,
  blue 40px
);

The center can be moved using percentages:

background: repeating-radial-gradient(
  circle at 25% 50%,
  red 0px,
  blue 40px
);

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

Position keywords are also supported:

background: repeating-radial-gradient(
  circle at top left,
  red 0px,
  blue 40px
);

Moving the center changes where the repeating rings originate.

For example, positioning the center at a corner creates a series of partial rings extending across the element.

Color Stops

Color stops define the colors used in the gradient and their positions along the radial direction.

For example:

background: repeating-radial-gradient(
  circle,
  red 0px,
  yellow 20px,
  blue 40px
);

The gradient transitions from red to yellow and then to blue over a 40px interval.

That color sequence repeats outward from the center.

Color stops can also use percentages:

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

Percentage positions are measured relative to the radial gradient's ending shape.

The actual distance represented by a percentage depends on the gradient's shape and size.

When color-stop positions are omitted, the browser determines their positions according to the CSS gradient color-stop rules.

Explicit positions are useful when a consistent repeating interval is required.

Repeating Interval

The repeating interval is the distance between the first and last color-stop positions.

For example:

background: repeating-radial-gradient(
  circle,
  red 0px,
  blue 30px
);

The color pattern repeats every 30px outward from the center.

Changing the last stop to 60px creates wider repeating bands:

background: repeating-radial-gradient(
  circle,
  red 0px,
  blue 60px
);

The pattern now repeats every 60px.

Smaller intervals create more rings within a given area, while larger intervals create fewer.

For example:

background: repeating-radial-gradient(
  circle,
  #0066cc 0px 10px,
  #ffffff 10px 20px
);

This produces alternating blue and white rings, with a complete repeating interval of 20px.

If the first and last color stops have the same position, the repeating 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-radial-gradient(
  circle,
  #0066cc 0px 20px,
  #ffffff 20px 40px
);

Blue occupies the first 20px from the center, followed by white for another 20px.

The complete 40px pattern repeats outward.

Each color can have two positions, specifying where its solid-color region begins and ends.

Another example:

background: repeating-radial-gradient(
  circle,
  #0066cc 0px 10px,
  #00a896 10px 20px,
  #ffffff 20px 30px
);

This creates three-color concentric rings that repeat every 30px.

Hard color stops are useful for target-like patterns, decorative circles, and repeated outlines.

Color Hints

A color hint adjusts where the midpoint of a transition occurs between two color stops.

For example:

background: repeating-radial-gradient(
  circle,
  red 0px,
  15px,
  blue 60px
);

The standalone 15px value is a color hint.

It places the halfway color blend at 15px instead of the normal midpoint of 30px.

This causes the transition to progress more quickly near the center and more slowly toward the end of the interval.

Color hints do not create additional color stops or change the repeating interval.

They only influence how colors are distributed between neighboring stops.

Color Interpolation

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

The in keyword allows a color space to be specified explicitly.

For example:

background: repeating-radial-gradient(
  circle in oklab,
  red 0px,
  blue 60px
);

This interpolates colors in the Oklab color space.

Another example:

background: repeating-radial-gradient(
  circle in oklch longer hue,
  red 0px,
  blue 60px
);

The longer hue setting controls the direction of hue interpolation around the color wheel.

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

The selected color space can significantly affect the appearance of transitions between saturated colors.

Explicit color interpolation syntax may have different browser support from basic repeating radial gradients.

Transparency

Transparent color stops allow an underlying background color or image to show through.

For example:

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

The blue rings appear over the background color, while the transparent rings reveal the background beneath them.

Transparent gradients can also be layered over other gradients:

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

The repeating radial gradient forms the top layer, while the linear gradient provides the underlying colors.

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

radial-gradient() vs. repeating-radial-gradient()

Both functions create color transitions extending outward from a center, but only repeating-radial-gradient() automatically repeats the defined pattern.

For example, a regular radial gradient:

background: radial-gradient(
  circle,
  red 0px,
  blue 50px
);

After the final color stop, the remaining background stays blue.

By comparison:

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

The red-to-blue transition repeats every 50px outward from the center.

Use radial-gradient() for a single radial progression and repeating-radial-gradient() for repeating rings or radial color patterns.

Example

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

HTML:

<div class="repeating-radial-demo"></div>

CSS:

.repeating-radial-demo {
  width: 100%;
  height: 220px;
  background-color: #0066cc;
  background-image: repeating-radial-gradient(
    circle at center,
    #0066cc 0px,
    #00a896 25px,
    #0066cc 50px
  );
}

The gradient begins with blue at the center, transitions to teal at 25px, and returns to blue at 50px.

The complete 50px pattern repeats outward from the center.

Because the first and last colors match, the repeating transitions are continuous at each interval boundary.

Concentric Rings Example

This example creates sharply separated blue and white concentric rings using hard color stops.

HTML:

<div class="repeating-radial-rings-demo"></div>

CSS:

.repeating-radial-rings-demo {
  width: 100%;
  height: 220px;
  background-color: #0066cc;
  background-image: repeating-radial-gradient(
    circle at center,
    #0066cc 0px 15px,
    #ffffff 15px 30px
  );
}

The blue and white bands each occupy 15px along the radial direction.

The complete pattern repeats every 30px outward from the center.

Changing the color-stop positions adjusts the thickness of the rings, while changing the center position moves their origin.

Common Uses

The repeating-radial-gradient() function is useful for creating repeating circular and elliptical patterns without external image files.

For example:

.circular-rings {
  background: repeating-radial-gradient(
    circle,
    #0066cc 0px 10px,
    #ffffff 10px 20px
  );
}
.elliptical-rings {
  background: repeating-radial-gradient(
    ellipse,
    #0066cc 0% 10%,
    #ffffff 10% 20%
  );
}
.transparent-rings {
  background: repeating-radial-gradient(
    circle,
    #0066cc 0px 10px,
    transparent 10px 20px
  );
}

These examples demonstrate circular rings, elliptical bands, and transparent repeating patterns.

Limitations

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

• At least two color stops are required.
• Color-stop positions must use valid lengths or percentages.
• The repeating interval is determined by the first and last color-stop positions.
• It returns an image value, not a standalone CSS color value.
• The gradient's shape and size affect percentage-based color-stop positions.
• Very small repeating intervals can create dense patterns or visible rendering artifacts.
• Hard color boundaries can vary slightly in appearance because of antialiasing.
• The function does not automatically animate the pattern.
• Explicit color interpolation syntax may have different browser support from basic radial gradients.
• Fallback background colors are recommended when supporting older browsers.

For example, this is valid:

background: repeating-radial-gradient(
  circle,
  red 0px,
  blue 40px
);

The following is invalid because only one color stop is supplied:

background: repeating-radial-gradient(red);

The following is invalid because radial gradient color-stop positions cannot use angular values:

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

Use lengths or percentages for radial color-stop positions and choose a repeating interval appropriate for the intended pattern.

Browser Support

The CSS repeating-radial-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-radial-gradient(
    circle,
    #0066cc 0px 15px,
    #ffffff 15px 30px
  );
}

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

Feature detection can also be used:

@supports (background-image: repeating-radial-gradient(circle, red 0px, blue 40px)) {
  .box {
    background-image: repeating-radial-gradient(
      circle,
      red 0px,
      blue 40px
    );
  }
}

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

Specifications

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

Additional color interpolation syntax is defined in the CSS Images Module Level 4 .

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