A conic gradient is characterized by color transitions rotating around a central point.
To generate a conic gradient, it’s necessary to specify a minimum of two colors.
| background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], …); |
By default, the angle is set to 0 degrees and the position is centered.
When no specific degree is provided, the colors will be evenly distributed around the central point.
Below is an example demonstrating a conic gradient featuring three colors:
Example
A conic gradient showcasing three colors.
| #grad { background-image: conic-gradient(red, yellow, green); } |
Conic Gradient with Five Colors:
Example
A conic gradient featuring five colors.
| #grad { background-image: conic-gradient(red, yellow, green, blue, black); } |
Below is an example demonstrating a conic gradient with three colors, each specified with a degree:
Example
A conic gradient featuring three colors, each assigned a degree value.
| #grad { background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg); } |
To achieve a pie-like appearance for the conic gradient, simply include border-radius: 50%.
Example
| #grad { background-image: conic-gradient(red, yellow, green, blue, black); border-radius: 50%; } |
Here is another pie chart where all colors have specified degrees:
Example
| #grad { background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg); border-radius: 50%; } |
The [from angle] determines the angle by which the entire conic gradient is rotated.
Below is an example illustrating a conic gradient with a from angle set to 90 degrees:
Example
A conic gradient featuring a specified from angle.
| #grad { background-image: conic-gradient(from 90deg, red, yellow, green); } |
The [at position] parameter designates the center of the conic gradient.
Below is an example demonstrating a conic gradient with a center position defined as 60% 45%:
Example
A conic gradient featuring a defined center position.
|
#grad { |
The repeating-conic-gradient() function is employed to create repeating patterns of conic gradients.
Example
A conic gradient that repeats.
|
#grad { |
Below is a repeating conic gradient with specified color starts and stops:
Example
Here is a repeating conic gradient featuring defined color starting points and color stopping points:
| #grad { background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg); border-radius: 50%; } |
