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

Next lesson: Color stops

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies