CSS Function

repeating-radial-gradient()

The repeating-radial-gradient() function creates a repeating radial gradient pattern, producing concentric rings or ellipses.

Syntax

repeating-radial-gradient([shape size at position,] color-stop [, color-stop]+)

Name	Type	Required	Description
shape	keyword	No	circle or ellipse
size	keyword \| length	No	Size of the gradient ending shape
color-stop	color [position]	Yes	Color and position for repeating rings

Repeating blue rings with 10px gaps.

css

background: repeating-radial-gradient(
  circle,
  #3b82f6 0px,
  #3b82f6 5px,
  transparent 5px,
  transparent 15px
);

Alternating red and white concentric circles.

css

background: repeating-radial-gradient(
  circle at center,
  #ef4444 0px 10px,
  white 10px 20px
);

✓

Chrome

v26++

✓

Firefox

v16++

✓

Safari

v6.1++

✓

Edge

v12++

✓

Opera

v12.1++

You can achieve similar results in Tailwind CSS using the following utility classes:

Use arbitrary values: bg-[repeating-radial-gradient(...)]

Why do my concentric rings look uneven?▼

Ensure equal spacing between stops. The ring spacing depends on the difference between consecutive stop positions.

Try our free tools to work with repeating-radial-gradient() and other CSS color functions.