🌀 CSS repeating-conic-gradient() — Complete Tutorial

🌐 What Is repeating-conic-gradient()?

The repeating-conic-gradient() function creates a **circular repeating pattern** by rotating colors around a center point. Unlike conic-gradient(), which creates a single sweep, this version keeps repeating the pattern infinitely.

>>“Use repeating-conic-gradient() for mandalas, pie-slice patterns, checker wheels, spinning fans, and hypnotic UI backgrounds — all with pure CSS.”

Note

✔ Perfect for artistic & UI pattern backgrounds
✔ Repeats angular segments automatically
✔ Great for circular textures and loaders

📦 Syntax

Basic Syntax

repeating-conic-gradient(from angle at position, color-stop1, color-stop2, ...);

Optional parts:

  • from angle → start rotation angle
  • at position → center position

📌 1. Basic Repeating Conic Pattern

Simple stripes

background: repeating-conic-gradient(
  red 0deg 20deg,
  yellow 20deg 40deg
);

Creates alternating red-yellow slices repeating around the circle.

📌 2. Checkerboard Wheel Pattern

Checker wheel

background: repeating-conic-gradient(
  black 0deg 15deg,
  white 15deg 30deg
);

Produces a wheel-style checkerboard pattern.

📌 3. Multi-Color Repeating Wheel

Colorful wheel

background: repeating-conic-gradient(
  red 0deg 10deg,
  orange 10deg 20deg,
  yellow 20deg 30deg,
  green 30deg 40deg
);

A vibrant circular multi-slice pattern.

📌 4. Creating a Spiral-Like Effect

Spiral illusion

background: repeating-conic-gradient(
  from 10deg,
  #000 0deg 10deg,
  #fff 10deg 20deg
);

Offsetting the start angle creates a subtle spiral motion.

📌 5. Positioning the Gradient Center

Custom center

background: repeating-conic-gradient(
  at 30% 60%,
  teal 0 20deg,
  lightblue 20deg 40deg
);

Moves the center of the pattern for asymmetrical artwork.

📌 6. Thin Repeating Lines (Circular Stripes)

Thin lines

background: repeating-conic-gradient(
  rgba(0,0,0,0.6) 0 2deg,
  transparent 2deg 6deg
);

Creates a subtle circular textured pattern.

📌 7. Radar or Sonar Scan Effect

Radar pattern

background: repeating-conic-gradient(
  rgba(0,255,0,0.5) 0deg 3deg,
  transparent 3deg 20deg
);

Ideal for dashboards or special effects.

📌 8. Repeating Conic for Mandala/Art

Mandala effect

background: repeating-conic-gradient(
  purple 0 10deg,
  pink 10deg 20deg,
  orange 20deg 30deg,
  yellow 30deg 40deg
);

Rotational repetition gives a beautiful mandala-like geometry.

📌 9. Animated Spinning Pattern

Spinner animation

.spinner {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    black 0 10deg,
    white 10deg 20deg
  );
  animation: spin 2s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

Creates a rotating fan or hypnotic loading animation.

📌 10. Donut Pattern (Using Mask)

Donut pattern

.donut {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    #ff5252 0 30deg,
    #ffd740 30deg 60deg
  );
  mask: radial-gradient(circle, transparent 40%, black 41%);
}

Creates hollow circular repeating patterns for unique UI shapes.

🧪 Real-World Examples

1️⃣ Decorative Background Texture

Decor background

background: repeating-conic-gradient(
  #eee 0 10deg,
  #ddd 10deg 20deg
);

2️⃣ Circular Heatmap Effects

Heatmap-style

background: repeating-conic-gradient(
  red 0 45deg,
  yellow 45deg 90deg,
  green 90deg 135deg,
  blue 135deg 180deg
);

3️⃣ Fancy Button Hover Background

Hover effect

button:hover {
  background: repeating-conic-gradient(
    royalblue 0 15deg,
    white 15deg 30deg
  );
}

⚠️ Common Mistakes

  • ❌ Forgetting to define angle lengths (patterns become huge)
  • ❌ Using excessively small angle steps → heavy rendering
  • ❌ Expecting smooth radial fades (use radial-gradient())
  • ❌ Leaving gap ranges incorrectly (visible seams)

Note

Always specify clear angle ranges (e.g., 0 20deg) to control pattern repetition precisely.

🔥 Summary

The repeating-conic-gradient() function creates beautiful, circular, repeating patterns perfect for artistic UI, dashboards, charts, loaders, and textures. By controlling angles, colors, and center position, you can create endless geometric effects without images.

>>“Repeating conic gradients are the artistic side of CSS — geometric, bold, and endlessly customizable.”

Learn more →MDN Docs 📘