CSS

🎯 What is repeating-radial-gradient()?

The repeating-radial-gradient() function works the same way as radial-gradient() — it creates a circular (or elliptical) color transition in the background.

However, there’s one key difference 👇

👉 The color transition doesn’t just happen once — it repeats at regular intervals.

In other words, when the gradient finishes spreading outward from the center, the same pattern starts again and continues across the entire background.

This allows you to create circular rings, waves, or other repeating patterns. 🎨

🧩 Syntax

CSS


background: repeating-radial-gradient( 
    shape size at position, 
    color1 start, 
    color2 end 
);

🔹 Parameters

1. Shape

Specifies whether the gradient is circular or elliptical.

circle → Circular gradient
ellipse → Elliptical (oval) gradient

🧠 In short:

A circle looks symmetrical, while an ellipse looks more stretched.

2. Size

Defines how far the gradient spreads from its center.

closest-side → Extends to the nearest edge
farthest-side → Extends to the farthest edge
closest-corner → Extends to the nearest corner
farthest-corner → Extends to the farthest corner (most common)

3. Direction (Position)

Defines where the center of the gradient starts.

Examples:

at center → Starts from the middle (default)
at top left → Starts from the top-left corner
at bottom right → Starts from the bottom-right corner

4. Colors + Slicing

Defines the colors used and how frequently they repeat.

Each color can include a pixel value such as 20px or 40px to control the repetition distance.

This determines the spacing of the color rings.

💡 Examples

1. Simple Repeating Circular Gradient

CSS


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

➡️ In this example, red and yellow repeat every 20px, creating circular red-yellow rings spreading outward.

2. Elliptical Repeating Gradient

CSS


background: repeating-radial-gradient(
    ellipse, 
    lightblue, 
    blue 30px, 
    lightblue 60px 
);

➡️ Light blue and blue alternate every 60px, forming repeating oval-shaped rings.

3. Repeating Gradient Starting From a Corner

CSS


background: repeating-radial-gradient(
    circle at top left, 
    pink, 
    purple 25px, 
    pink 50px 
);

➡️ The gradient begins from the top-left corner, creating purple-pink rings that repeat outward.

🧠 Summary Table

Property	Meaning
repeating-radial-gradient()	Creates a circular or elliptical gradient that repeats as a pattern
shape	Defines the shape (circle or ellipse)
size	Controls how far the gradient extends
direction	Sets the center position (at center or at top left, etc)
colors + slice	Defines the colors and repetition spacing

✅ Conclusion
The repeating-radial-gradient() function is perfect for creating repeating circular effects such as:
Ring patterns
Ripple effects
Radar-style backgrounds
Decorative textures
Abstract UI designs
Because the gradient repeats automatically, you can create visually rich backgrounds using only CSS — without needing any images.

CSS Radial Gradient

CSS _direction

CSS

CSS