Widely available Supported across all major browsers. Safe to use in production.

Conic gradients

The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>.

Effects

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.gradient.conic-gradient
69
79
83
12.1
69
12.2
CSS type
conic-gradient.doubleposition

Double-position color stops
72
79
83
12.1
72
12.2
conic-gradient.single color stop

Single color stop and 0-1 positions
135
135
136
18.4
135
18.4
repeating-conic-gradient

The repeating-conic-gradient() CSS function creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a center point (rather than radiating from the center).
69
79
83
12.1
69
12.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.pie-chart {
  background: conic-gradient(
    #4f46e5 0% 40%,
    #06b6d4 40% 70%,
    #f59e0b 70% 100%
  );
  border-radius: 50%;
}

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

Live demo

Circlegraph

Conic gradients Circlegraph demo.

PreviewFullscreen

col-hoi-l

Conic gradients col-hoi-l demo.

PreviewFullscreen

ka-pattern

Conic gradients ka-pattern demo.

PreviewFullscreen

Use cases

  • Using Conic gradients

    The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links