What is a CSS conic gradient?

A CSS conic gradient transitions colors around a center point, sweeping like a clock hand. Defined with the conic-gradient() function, colors transition angularly rather than linearly or radially. Conic gradients can create effects that are impossible with linear or radial gradients, such as pie charts, color wheels, and starburst patterns — all in pure CSS with no images.

Common use cases

Conic gradients are ideal for creating pure-CSS pie charts and donut charts, color wheel pickers, angular progress indicators, and decorative starburst backgrounds. Combined with border-radius, a conic gradient can produce a perfect color wheel. They are also used for loading spinners and creative UI elements that need angular color transitions.

/* CSS — conic gradient examples */

/* Color wheel */
.wheel {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  border-radius: 50%;
}

/* Pie chart (3 segments) */
.pie {
  background: conic-gradient(#3b82f6 0% 40%, #ef4444 40% 70%, #22c55e 70% 100%);
  border-radius: 50%;
}

/* Angular progress indicator */
.progress {
  background: conic-gradient(#3b82f6 0deg 270deg, #e5e7eb 270deg 360deg);
  border-radius: 50%;
}