PLAY CSS
jaen

Background

conic-gradient()

conic-gradient() creates an image whose colors change as you sweep around a center, like the hand of a clock. It draws pie charts and color wheels.

Syntaxconic-gradient( …
conic-gradient(
  [ from <angle> ]? [ at <position> ]? ,
  <angular-color-stop-list>
)

<angular-color-stop-list> =
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#
<angular-color-stop> = <color> <angle-percentage>{0,2}
<angular-color-hint> = <angle-percentage>

Preview

Presets
Drag the bottom-right corner to resize

Code

.box {
  background: conic-gradient(
    from 45deg,
    #88d1c7,
    #77a7d7,
    #eaac3a,
    #88d1c7
  );
}

Controls

conic-gradient()
repeating-
from <angle>45deg
at <position>50% 50%

Click or drag inside the box to move the center

Horizontal
Vertical
angular-color-stop-list

Drag the markers to move stops

#88d1c7
Color
Position
#77a7d7
Color hint (midpoint from previous)
Color
Position
#eaac3a
Color hint (midpoint from previous)
Color
Position
#88d1c7
Color hint (midpoint from previous)
Color
Position

About

Start angle and center

  • As with linear-gradient(), the from angle starts at 0deg pointing up and increases clockwise. It defaults to from 0deg.
  • Put the center after at, written like background-position. It defaults to center.
  • Unlike radial-gradient() there is no size: the colors run straight from the center to the edges of the element.

Stop positions are angles

  • Write positions as angles such as 90deg or as a % of a full turn (25% = 90deg). Both count from the start angle.
  • The first and last colors meet after a full turn, so repeating the first color at the end hides the seam. That is what the fourth color in the initial value is for.

Pie charts

Give each color two positions to make solid slices. Since a position smaller than the previous one is clamped to it, you can start every slice at 0 and only write where it ends: conic-gradient(#88d1c7 0 25%, #77a7d7 0 60%, #eaac3a 0). Add border-radius: 50% for a round chart.

repeating-conic-gradient()

Repeats the angle span from the first to the last stop. repeating-conic-gradient(#88d1c7 0 15deg, #77a7d7 0 30deg) draws stripes radiating from the center.

References

MDN Web Docsconic-gradient()SpecificationCSS Images Module Level 4Can I useconic-gradient()
PLAY CSS