CSS: Conic Gradient

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. 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

• CSS: Repeating Conic Gradient

Color wheel spinner animation

• CSS: 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

• CSS: Angle Units (deg rad grad turn)

?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.