🌀 CSS conic-gradient() — Complete Tutorial

🌐 What Is conic-gradient()?

The conic-gradient() function creates a gradient that rotates around a center point, similar to the colors on a color wheel, pie chart, or radial chart. Colors transition **clockwise around a circle**, instead of outward (radial) or linearly (linear gradients).

>>“Use conic-gradient() to make pie charts, spinners, color wheels, donut charts, clock dials, and artistic circular patterns.”

Note

✔ Colors rotate around center
✔ Supports angle-based color stops
✔ Perfect for visual data representation

📦 Syntax

Basic Syntax

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

Optional parts you can specify:

  • from angle: Start angle (default is 0deg)
  • at position: Center location (default is center)

📌 1. Basic Conic Gradient

Simple conic gradient

background: conic-gradient(red, yellow, green, blue);

Creates a color wheel-like gradient.

📌 2. Defining Exact Angles

Angle control

background: conic-gradient(
  red 0deg 90deg,
  yellow 90deg 180deg,
  green 180deg 270deg,
  blue 270deg 360deg
);

Creates clear quadrant slices like a pie chart.

📌 3. Starting from a Custom Angle

Start angle

background: conic-gradient(
  from 45deg,
  red,
  yellow,
  green
);

Rotates the entire gradient by 45 degrees.

📌 4. Changing Gradient Center

Positioned center

background: conic-gradient(
  at top left,
  red,
  yellow,
  blue
);

Offsetting the center creates asymmetrical shapes.

📌 5. Hard Color Stops (Sharp Pie Slices)

Hard stops

background: conic-gradient(
  red 0 120deg,
  yellow 120deg 240deg,
  blue 240deg 360deg
);

Useful for pie charts and dashboard UI.

📌 6. Smooth Angular Gradients

Smooth blend

background: conic-gradient(
  red 0deg,
  blue 360deg
);

Creates a smooth sweep of color around the circle.

📌 7. Transparent Conic Gradients

Transparency effect

background: conic-gradient(
  from 0deg,
  rgba(255,0,0,0.6),
  rgba(255,0,0,0) 180deg
);

Used for highlight rings or spotlight radar effects.

📌 8. Repeating Conic Gradients

Repeating version

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

Creates striped circular patterns like spinning fans or mandalas.

📌 9. Creating a Pie Chart UI

Pie chart

.pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #4caf50 0 40%,
    #ff9800 40% 70%,
    #f44336 70% 100%
  );
}

Great for dashboards or analytics UIs.

📌 10. Donut Chart (Pie with Hole)

Donut chart

.donut {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background:
    conic-gradient(
      #ff5252 0 25%,
      #ffea00 25% 50%,
      #69f0ae 50% 100%
    );
  mask: radial-gradient(circle, transparent 40%, black 41%);
}

Mask removes the center to create a donut.

📌 11. Cool Spinner Effect

Spinner

.spinner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #0000, #000 90deg);
  animation: spin 1s linear infinite;
}

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

🧪 Real-World Examples

1️⃣ Color Wheel

Color wheel

background: conic-gradient(
  red,
  yellow,
  lime,
  cyan,
  blue,
  magenta,
  red
);

2️⃣ Progress Ring

Progress ring

.progress {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    #4caf50 0 var(--percent),
    #ddd var(--percent)
  );
}

3️⃣ Circular Heatmap

Heatmap

.heatmap {
  background: conic-gradient(
    #ff5722 0 90deg,
    #ff9800 90deg 180deg,
    #ffeb3b 180deg 270deg,
    #4caf50 270deg 360deg
  );
}

⚠️ Common Mistakes

  • ❌ Forgetting angles → colors distribute evenly by default
  • ❌ Expecting radial behavior (conic rotates, radial expands)
  • ❌ Leaving small angle gaps → visible seams
  • ❌ Overusing transparency causing muddy results

Note

Always double-check your angle ranges (0–360deg) to ensure clean, seamless visuals.

🔥 Summary

The conic-gradient() function unlocks powerful circular gradient effects useful for charts, spinners, artistic patterns, and UI highlights. With angle control, color stops, positioning, and repetition, it is one of the most flexible gradient tools in CSS.

>>“Conic gradients bring motion, direction, and storytelling to circular designs.”

Learn more →MDN Docs 📘