Conic gradient
Learn angular gradients with conic-gradient().
What is a conic gradient?
A conic gradient blends colors along an angle that rotates around a center point. You write it with the conic-gradient() function. conic-gradient(red, yellow, red) starts at the center and rotates red-yellow-red across 360 degrees.
The most familiar use is a color wheel: give rainbow stops at even intervals and you get a wheel. Pie slices and clock hands also suit conic gradients well.
Color stops in a conic gradient
In a conic gradient, each color stop sits at an angle around the center. By default, stops divide 360 degrees equally: three colors get 120-degree gaps.
To set a stop position explicitly, give an angle like red 0deg, yellow 120deg. This lets you control exactly where each slice starts and ends.
Exercise Build a color wheel background
Define a background for the .wheel selector. The value must be a conic-gradient() function with six color stops: red, orange, yellow, green, blue, violet. All separated by commas and inside the parentheses. Use only the background property.
Show example solution
/* color wheel background */
.wheel {
background: conic-gradient(red, orange, yellow, green, blue, violet);
}Test yourself
-
How do you set the start angle of conic-gradient()?
background: conic-gradient(____, red, yellow);- to top
- from 45deg
- circle at center
- starting 45deg
Show answer
from 45deg — Correct. conic-gradient() takes its start angle with the from keyword.
-
Write the conic gradient with a from angle
background: conic-gradient(____, red, yellow, red);Show answer
background: conic-gradient(from 0deg, red, yellow, red); -
Match each gradient function to its blend shape
- linear-gradient
- Along a straight line
- radial-gradient
- From center outward
- conic-gradient
- Around center, by angle