CSS: Conic Gradient

What is conic-gradient

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

can be used on background-image, border-image, background-clip, text-fill-color etc.

Basic Example

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

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

.x {
 background-image: conic-gradient(from 90deg, red, white);
}

?at-position

Optional. Syntax is

at position

example

• at center (default)
• at 50% 60%
• at top
• at left

.x {
 background-image: conic-gradient(from 90deg at 30% 40%, red, white);
}

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

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

browser support

supported by all major browsers since 2021.