CSS Conic Gradient

0
0

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 0degand 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 4specification, 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

Chrome Opera Firefox IE Edge Safari
No No No No No No

#Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
No No No No No No

#Additional Resources

  • CSS Image and Replaced Content Module Level 4: This is the official specification where conic gradients are being introduced.
  • Conical Gradients in CSS: A CSS-Tricks post on the topic from 2013 with awesome examples.
  • Conic Gradient Polyfill: Lea Verou has created a polyfill that makes conic gradients possible ahead of the official release.
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.