CSS Conic Gradients

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.

] [at position,] color [ degree ], color [ degree ], ...

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:

A conic gradient with three colors:

The following example shows a conic gradient with five colors:

A conic gradient with five colors:

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

A conic gradient with three colors and a degree for each color:

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:

A conic gradient with a from angle:

The [at position ] specifies the center of the conic gradient. The following example shows a conic gradient with a center position of 60% 45%:

A conic gradient with a specified center position:

The following table lists the CSS gradient functions:

Creates a conic gradient. Define at least two colors (around a center point)

Creates a linear gradient. Define at least two colors (top to bottom)

Creates a radial gradient. Define at least two colors (center to edges)