🔁 CSS repeating-radial-gradient() — Complete Tutorial

🌐 What Is repeating-radial-gradient()?

The repeating-radial-gradient() function generates a radial gradient that repeats infinitely outward from a center point. Unlike radial-gradient() (which renders once), the repeating version creates patterned circles or ellipses that tile seamlessly.

>>“Use repeating-radial-gradient() to create dotted patterns, ripple effects, target rings, decorative textures — all with pure CSS.”

Note

✔ Creates repeating circular/elliptical patterns
✔ Perfect for backgrounds and UI effects
✔ Does not require images

📦 Syntax

Basic Syntax

repeating-radial-gradient(shape size at position, color-stop1, color-stop2, ...);

Everything works like radial-gradient(), but the gradient pattern repeats automatically.

📌 1. Basic Repeating Circles

Simple repeating gradient

background: repeating-radial-gradient(
  circle,
  black 0,
  black 5px,
  white 5px,
  white 15px
);

Produces a target-like pattern with repeated rings.

📌 2. Polka Dot Pattern

Polka dots

background: repeating-radial-gradient(
  circle,
  #333 0 6px,
  transparent 6px 20px
);

Creates dots spaced evenly across the background.

📌 3. Ripple / Wave Pattern

Ripple effect

background: repeating-radial-gradient(
  circle,
  #6ae 0,
  #6ae 10px,
  #def 10px,
  #def 20px
);

Looks like expanding water ripples.

📌 4. Concentric Rings

Concentric circles

background: repeating-radial-gradient(
  circle at center,
  red 0,
  red 10px,
  yellow 10px,
  yellow 20px
);

Useful for target graphics, focus effects, UI spotlights.

📌 5. Offset Center Position

Custom center position

background: repeating-radial-gradient(
  circle at 20% 40%,
  #000 0,
  #000 8px,
  #fff 8px,
  #fff 18px
);

Moves the gradient center for asymmetrical design patterns.

📌 6. Elliptical Repeating Gradient

Ellipse pattern

background: repeating-radial-gradient(
  ellipse,
  #4a90e2 0,
  #4a90e2 10px,
  white 10px,
  white 25px
);

Creates repeated ovals rather than circles — great for decorative textures.

📌 7. Dotted Screen / Noise Effect

Screen effect

background: repeating-radial-gradient(
  circle,
  rgba(0,0,0,0.15) 0 1px,
  transparent 1px 4px
);

Looks like subtle screen grain or retro printing dots.

📌 8. Gradient + Pattern Combination

Overlaying gradients

background:
  radial-gradient(circle, rgba(0,0,0,0.2), transparent 70%),
  repeating-radial-gradient(circle, #ccc 0 5px, transparent 5px 20px);

Creates layered visual depth using two gradient images.

📌 9. Animated Repeating Radial Pattern

Animation

.animated-bg {
  background: repeating-radial-gradient(
    circle,
    #000 0,
    #000 5px,
    #fff 5px,
    #fff 15px
  );
  animation: pulse 2s linear infinite;
}

@keyframes pulse {
  0% { background-size: 100% 100%; }
  100% { background-size: 120% 120%; }
}

Creates a pulsing radar-like animation.

🧪 Real-World Examples

1️⃣ Retro Poster Background

Retro vibe

.retro {
  background: repeating-radial-gradient(
    circle,
    #ff6b6b 0,
    #ff6b6b 15px,
    #feca57 15px,
    #feca57 30px
  );
}

2️⃣ Gaming Radar Effect

Radar effect

.radar {
  background: repeating-radial-gradient(
    circle,
    rgba(0,255,0,0.4) 0,
    rgba(0,255,0,0.4) 2px,
    transparent 2px,
    transparent 20px
  );
}

3️⃣ Decorative Circular Texture

Texture

.texture {
  background: repeating-radial-gradient(
    circle,
    #ddd 0,
    #ddd 3px,
    #fff 3px,
    #fff 12px
  );
}

⚠️ Common Mistakes

  • ❌ Using no explicit lengths → inconsistent pattern
  • ❌ Very small stop differences → heavy CPU usage
  • ❌ Expecting smooth fades — repeating gradients produce tiled patterns
  • ❌ Forgetting that the pattern repeats infinitely

Note

Always specify **clear stop lengths** to control ring thickness and spacing.

🔥 Summary

repeating-radial-gradient() allows you to create dynamic, repeating circular or elliptical patterns with pure CSS. It’s perfect for polka dots, ripples, target rings, radar animations, screen textures, and artistic backgrounds.

>>“Radial repetition opens the door to stunning visual patterns — all without images.”

Learn more →MDN Docs 📘