CSS conic-gradient() Function

The conic-gradient() function allows you to create a conic gradient using CSS.

A conic gradient is a gradient with color transitions rotated around a center point (rather than radiating from the center like a radial gradient, or going in a straight line like a linear gradient).

To create a conic gradient, use the conic-gradient() function as a value to any property that accepts images (for example, background-image, background, or border-image properties).

Conic gradients are created by specifying a center point and a starting angle, followed by a list of color stops. The colors transition as they rotate around the center point. Like this:

Positioning the Center

By default, the center of the gradient is positioned at the center of the element (i.e., 50% 50%). You can change this using the at keyword followed by a position value.

Here's an example of moving the center point to the top left:

Changing the Starting Angle

By default, the gradient starts at 0 degrees (pointing straight up). You can change the starting angle using the from keyword followed by an angle.

Here's an example of starting the gradient at 90 degrees:

Hard Color Stops (Pie Charts)

Like other gradients, you can set your color stops so that they go straight from one specified color to the next with no gradual blend. Because conic gradients rotate around a center point, this makes them perfect for creating CSS pie charts.

Here is an example of a pie chart created using hard color stops:

Official Syntax

The official syntax of the conic-gradient() function is as follows:

Where <angular-color-stop-list> is defined as:

Possible Values

As indicated in the official syntax, the conic-gradient() function accepts the following values:

angle

Preceded by the from keyword, this specifies the starting angle of the gradient. For example, from 45deg.

position

Preceded by the at keyword, this specifies the center point of the gradient. It uses the same syntax as the background-position property. For example, at 50% 50% or at bottom right.

angular-color-stop-list

A list of color stops. An angular color stop is a color value, followed by an optional stop position (or two stop positions, which will create a solid color band). The stop position can be provided as a percentage or an angle (e.g., deg, turn).

CSS Specifications

• The conic-gradient() function is defined in CSS Image Values and Replaced Content Module Level 4 (Editor’s Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.