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

Conic gradients

The conic-gradient() and repeating-conic-gradient() CSS functions create backgrounds that progress between two or more colors around a center point.

Effects

Overview

The conic-gradient() and repeating-conic-gradient() CSS functions create backgrounds that progress between two or more colors around a center point.

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() and repeating-conic-gradient() CSS functions create backgrounds that progress between two or more colors around a center point.

Cautions

  • May not be supported in older browsers.

Accessibility

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

Related links

Powered by web-features