Conic Gradients
CSS Conic Gradients
A gradient including color transitions revolved around a central point is called a conic gradient.
A conic gradient requires the definition of at least two colors.
Syntax
By default, location is center and angle is 0 degrees.
The colors will be distributed evenly around the center point if no degree is given.
Conic Gradient: Three Colors
A conic gradient with three colors is displayed in the example that follows:
Example
A conic gradient with three colors:
#grad {
background-image: conic-gradient(red, yellow, green);
}
Conic Gradient: Five Colors
The following example shows a conic gradient with five colors:
Example
A conic gradient with five colors:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Conic Gradient: Three Colors and Degrees
A conic gradient with three colors and a degree for each color is displayed in the example below:
Example
A conic gradient with three colors and a degree for each color:
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
Create Pie Charts
To achieve a pie-like appearance for the conic gradient, simply add border-radius: 50%.
Example
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
Here is another pie chart with defined degrees for all the colors:
Example
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Conic Gradient With Specified From Angle
The angle that rotates the complete conic gradient is specified by the [from angle].
An illustration of a conic gradient with a from angle of 90 degrees is provided below:
Example
A conic gradient with a from angle:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
}
Conic Gradient With Specified Center Position
The conic gradient’s center is indicated by the [at location].
A conic gradient with a center point of 60% 45% is displayed in the example below:
Example
A conic gradient with a specified center position:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
}
Repeating a Conic Gradient
Conic gradients can be repeated using the repeating-conic-gradient() function:
Example
A repeating conic gradient:
#grad {
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Here is a repeating conic gradient with defined color-starts and color-stops:
Example
A repeating conic gradient with defined color-starts and color-stops:
#grad {
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
CSS Gradient Functions
The following table lists the CSS gradient functions:
| Function | Description |
|---|---|
| conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
| linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
| radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |
