CSS: Conic Gradient

By Xah Lee. Date: . Last updated: .

What is conic-gradient

conic-gradient() creates gradients that rotate colors around a central point, forming effects like pie chart.

Basic Example

div.basic4824 {
 width: 200px;
 height: 200px;
 border-radius: 50%;
 background-image: conic-gradient(red, white);
}

Example. Multiple colors

Example. Custom start angle

Example. Custom center position

Example. color stops

Example. Create sharp edges

when 2 neighbor color stops are the same, there is a sharp edge.

Example. Pie chart

Example. No sharp change

to avoid sharp color change at the start and end angle, specify the same color for the starting color and ending color.

Example. rainbow

Example. HSL color

Repeating Conic Gradient

Color wheel spinner animation

Basic Syntax

background-image: conic-gradient(?from-angle ?at-position, color-stop-list);

Sets the starting angle (default is 0deg).

?from-angle

Optional. Syntax is

from angle

angle is any Angle Unit. e.g. 30deg, 0.3turn

?at-position

Optional. Syntax is

at position

example

  • at center (default)
  • at 50% 60%
  • at top
  • at left
color-stop-list

List of colors, optionally with angular positions (e.g. red 90deg).

If you omit angles, colors spread evenly around the circle (360° / number of colors).

browser support

supported by all major browsers since 2021.

CSS conic gradient

CSS Color