CSS conic-gradient() Function

Example

Conic gradient with three colors:

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

The conic-gradient() function creates an image consisting of a gradient.

A conic gradient is a gradient with color transitions rotated around a center point (instead of radiating from the center).

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

Conic gradient example:

| Version: | CSS3 | | --- | --- |

The numbers in the table specify the first browser version that fully supports the function.

Function
conic-gradient()	69.0	79.0	83.0	12.1	56.0

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

Value	Description
from angle	Optional. The starting angle. Default is 0deg.
at position	Optional. The center position. Default is center.
color degree, ..., color degree	The conic gradient stops. This value includes a color value, followed by an optional stop position (a degree between 0 and 360 or a percentage between 0% and 100%).

Conic gradient with five colors:

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

Conic gradient with three colors and specified degrees:

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

Converting the conic gradient into a circle by setting border-radius: 50%:

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

Setting the starting angle:

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

Specifying the center position:

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

Specifying a position and an angle:

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

Creating a pie chart:

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

Code Explanation:

Creating a color palette:

#grad {
  background: radial-gradient(closest-side, gray, transparent),
        conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
}

border-radius: 50%; }