repeating-radial-gradient() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The repeating-radial-gradient() CSS function is used to create radial gradients that repeat indefinitely, producing a series of concentric circles or elliptical shapes that alternate between specified colors. Unlike the standard radial-gradient() function, which creates a single gradient transition, repeating-radial-gradient() continues the pattern beyond the last color stop, making it ideal for backgrounds or decorative patterns that require a continuous, tiled radial effect.

This function works by defining multiple color stops and optionally specifying the shape (circle or ellipse), the size (closest-side, farthest-corner, etc.), and the position of the gradient. Once the final color stop is reached, the gradient repeats from the start point, extending outward in a seamless, infinite loop.

A practical use of repeating-radial-gradient() is creating ripple-like effects, dotted patterns, or subtle textural backgrounds. For example, it can be applied to a div element to create a concentric ring pattern that repeats across the element’s surface. It pairs well with properties like background-image, background-size, and background-repeat to control the scaling and tiling of the repeated gradient.

Example:

div {
  width: 300px;
  height: 300px;
  background-image: repeating-radial-gradient(
    circle,
    #ffcc00 0px,
    #ffcc00 20px,
    #ff6600 20px,
    #ff6600 40px
  );
}

In this example, concentric rings alternate between yellow and orange every 20px, and the pattern repeats outward indefinitely, filling the div completely. This makes it particularly useful for dynamic backgrounds or visual effects where a seamless, repeating radial pattern is desired.

You can also combine repeating-radial-gradient() with multiple layers of gradients using background to create more complex textures or 3D-like effects.

Syntax

repeating-radial-gradient( 

       [[ circle  || <length> ]                     [at <position>]? , | 

        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |

        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |

                                                     at <position>   ,    <color-stop-list> )

        ---------------------------------------------------------------/-----------------/

                  Contour, size and position of the ending shape          List of color stops  

    

where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side

   and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> 

   and <linear-color-stop> = <color> [ <color-stop-length> ]? 

   and <color-stop-length> = [ <percentage> | <length> ]{1,2} 

   and <color-hint> = [ <percentage> | <length> ]

Values

<position>The position of the gradient, interpreted in the same way as background-position or transform-origin. If unspecified, it defaults to center.
<shape>The gradient's shape. The value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to ellipse.
<extent-keyword>
A keyword describing how big the ending shape must be. The possible values are:
- closest-side
- closest-corner
- farthest-side
- farthest-corner
<color-stop>A color-stop's <color> value, followed by an optional stop position (either a <percentage> or a <length> along the gradient's axis). A percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the virtual gradient ray.

Example

HTML

<div class="ripple-box"></div>

CSS

.ripple-box {

  width: 300px;

  height: 300px;

  border-radius: 8px;

  border: 2px solid #333;



  /* The Gradient Logic */

  background: repeating-radial-gradient(

    circle,            /* Shape: can be 'circle' or 'ellipse' */

    #3498db,           /* Starting color */

    #3498db 10px,      /* End of first color at 10px */

    #f1c40f 10px,      /* Start of second color at 10px (creates sharp line) */

    #f1c40f 20px       /* End of the pattern at 20px */

  );

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS repeating-radial-gradient() function. Hover over a browser icon to see the version that first introduced support for this CSS function.