CSS conic-gradient() Function

Definition and Usage

CSS conic-gradient() The function sets the conic gradient as the background image.

A conic gradient is a gradient of color transition rotating around the center point (similar to a pie chart and a color wheel).

To create a conic gradient, you must define at least two color stop points.

Conic Gradient Example:

Instance

Example 1

A conic gradient with three colors:

#grad {
  background-image: conic-gradient(red, yellow, green);
}

Try it yourself

Example 2

A conic gradient with five colors:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

Try it yourself

Example 3

A conic gradient with three colors, specifying an angle for each color:

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

Try it yourself

Example 4

By adding border-radius: 50%, the conic gradient looks like a pie chart:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

Try it yourself

Example 5

Conic gradient with start angle:

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

Try it yourself

Example 6

Conic gradient with center position:

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Try it yourself

Example 7

Conic gradient with both start angle and center position:

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Try it yourself

Example 8

Another pie chart example:

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

Try it yourself

CSS syntax

background-image: conic-gradient([from angle] position,] color degree, color degree, ... );

Technical details

Browser support

The numbers in the table represent the first browser version to fully support this function.

Related pages

Tutorial:CSS gradient

Reference:CSS background-image Property

Reference:CSS linear-gradient() function

Reference:CSS radial-gradient() function

Reference:CSS repeating-conic-gradient() function

Reference:CSS repeating-linear-gradient() function

Reference:Reference: CSS repeating-radial-gradient() function