CSS Conic Gradients

The CSS conic-gradient() function creates a conic gradient.

A conic gradient is a gradient with color transitions rotated around a center point.

To create a conic gradient you must define at least two colors.

By default, angle is 0deg and position is center.

If no degree is specified, the colors will be spread equally around the center point.

The following example shows a conic gradient with three colors:

The following example shows a conic gradient with five colors:

The following example shows a conic gradient with three colors and a degree for each color:

Just add border-radius: 50% to make the conic gradient look like a pie:

Here is another pie chart with defined degrees for all the colors:

The [from angle ] specifies an angle that the entire conic gradient is rotated by.

The following example shows a conic gradient with a from angle of 90deg:

The [at position ] specifies the center of the conic gradient.

The following example shows a conic gradient with a center position of 60% 45%:

The CSS repeating-conic-gradient() function is used to repeat conic gradients:

Here is a repeating conic gradient with defined color-starts and color-stops:

The following table lists the CSS gradient functions: