CSS conic-gradient() Function

Example

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

Meaning

The conic-gradient() css function creates an image consisting of a gradient with color transitions rotated around a center point.

Conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the gradient data type, which is a special kind of image.

Note: To create a conic gradient that repeats so as to fill a 360 degree rotation, use the repeating-conic-gradient() function instead.

Note: Why is it called a "conic" gradient? If the color stops are much lighter on one side than the other, it can look like a cone from above.

Version: CSS3

Standard Syntax

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

Browser Support

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

Status

Function Arguments

The following table describes the arguments of this function.

Argument	Description
angle	Preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
position	The default value is center(the gradient will be centered). Using the same length, order and keyterm values as the background-position property, the position defines center of the gradient.
angularColorStop	A color stops color value, followed by one or two optional stop positions.
colorHint	By default the midpoint of the color transition is the midpoint between two color stops. An interpolation hint defining how the gradient progresses between adjacent color stops.

More Example

By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:

Example

div {
  height: 200px;
  width: 200px;
  background: conic-gradient(red, blue);
}

Creating the Conic Center

You can create the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at":

Example

div {
  height: 200px;
  width: 200px;
  background: conic-gradient(at 0% 30%, red 10%, green 30%, blue 50%);
}

Changing the angle

You can position the starting angle of the conic gradient using the "from" keyword at the beginning followed by an angle or a length, and you can specify different positions for the colors stops by including an angle or length after them.

By default, the different color stops you specify are spaced equidistantly around the circle.

Example

div {
  height: 200px;
  width: 200px;
  background: conic-gradient(from 45deg, red, green 50%, blue 85%, yellow);
}

Creating Pie Chart

To create pie chart you have use border-radius CSS property and use degree argument.

Example

div {
  height: 200px;
  width: 200px;
  background-image: 
  conic-gradient(red 0deg, red 100deg,
                 green 100deg, green 180deg,
                 blue 180deg, blue 220deg,
                 yellow 220deg, yellow 360deg);
  border-radius: 50%;
}

Checkerboard

Example

div {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background: conic-gradient(
  #fff 0.25turn,
  #000 0.25turn 0.5turn,
  #fff 0.5turn 0.75turn,
  #000 0.75turn
  ) top left / 25% 25% repeat;
}

❮ Previous Functions Next ❯