Skip to main content
Home / Code Snippets / CSS / CSS Conic Gradient

A conic gradient is similar to a radial gradient. Both are circular and use the center of the element as the source point for color stops. However, where the color stops of a radial gradient emerge from the center of the circle, a conic gradient places them around the circle.

Illustrating the difference between Conic (left) and Radial (right) gradients.

They’re called “conic” because they tend to look like the shape of a cone that is being viewed from above. Well, at least when there is a distinct angle provided and the contrast between the color values is great enough to tell a difference.

Conic gradients were not included in the original batch of CSS Gradients in CSS Level 3, but are included in the CSS Image Values and Replaced Content specification in Level 4, which is currently in working draft at the time of this writing.


The conic gradient syntax is easier to understand in plain English:

Make a conic-gradient that is located at [some point] that starts with [one color] at some angle and ends with [another color] at [some angle]

The official specification looks more like this:

conic-gradient() = conic-gradient(
  [ from  ]? [ at  ]?,

At its most basic level, it looks like this:

.conic-gradient {
  background: conic-gradient(#fff, #000);

…where it is assumed that the location of the gradient starts at the very center of the element (50% 50%) and is evenly distributed between white and black color values.

We could have written this in several other ways, all of which are valid:

.conic-gradient {
  /* Original example */
  background-image: conic-gradient(#fff, #000);
  /* Explicitly state the location center point */
  background: conic-gradient(at 50% 50%, #fff, #000);
  /* Explicitly state the angle of the start color */
  background: conic-gradient(from 0deg, #fff, #000);
  /* Explicitly state the angle of the start color and center point location */
  background: conic-gradient(from 0deg at center, #fff, #000);
  /* Explicitly state the angles of both colors as percentages instead of degrees */
  background: conic-gradient(#fff 0%, #000 100%);
  /* Explicitly state the angle of the starting color in degrees and the ending color by a full turn of the circle */
  background: conic-gradient(#fff 0deg, #000 1turn);

If we do not specify an angle for the colors, then it is assumed that the gradient is evenly divided between the colors, starting at 0deg and ending at 360deg. That kind of creates a hard stop where the colors bump right up to one another at 0deg and 360deg. If we introduce a third value, then that creates a smoother gradient and we start to get that cool cone-looking perspective.

.conic-gradient {
  background: conic-gradient(#fff, #000, #fff);
Two values (left) create a hard stop and three values (right) create a smooth transition.

We can have fun with conic gradients. For example, we can use it to create the same sort of pattern you might see in a color picker or the infamous Mac spinning beach ball indicator:

.conic-gradient {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
A mockup illustrating a conic gradient emulating a color wheel pattern

Or, let’s try a simple pie chart by adding hard stops between three color values:

.conic-gradient {
  background: conic-gradient(lime 40%, yellow 0 70%, red 0);
A mockup illustrating a conic gradient emulating a simple three-color pie chart

Browser Support

It’s currently part of the CSS Image and Replaced Content Module Level 4 specification, which is in working draft. In the meantime, Lea Verou (who has contributed to the spec) provides a polyfill that makes them possible.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.



Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari

Additional Resources