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.

Syntax

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 <angle> ]? [ at <position> ]?,
  <angular-color-stop-list>
)

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 our starting color would begin somewhere else on the circle, say one-quarter of the way at 90deg, then that creates a smoother gradient and we start to get that cool cone-looking perspective.

.conic-gradient {
  background: conic-gradient(from 90deg, #fff, #000);
}
Specifying a rotation angle (right) creates a smoother gradient.

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

Unfortunately, conic-gradient has no browser support at the time of this writing. 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.

Desktop

ChromeOperaFirefoxIEEdgeSafari
NoNoNoNoNoNo

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
NoNoNoNoNoNo

Additional Resources

Comments

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag