CSS conic gradient generator
Pick the colors, set where each one sits around the circle, and choose the start angle and center. The preview and the CSS update as you go.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Set the start angle and the center of the gradient, in percent of the box.
- Set each stop’s color and its position, from 0 to 100 percent of a full turn. Use Add stop for up to 8 stops.
- Optionally choose OKLab or OKLCH to blend in.
- Copy the rule.
What the output means
background: conic-gradient(from 0deg at 50% 50%, #ff0000 0%, #ffd700 33%, #00c853 66%, #ff0000 100%); starts at the top, goes clockwise through yellow and green and ends with red again, so there is no visible seam.
Example
For a colour wheel, use the same color at 0% and 100% and in oklch blending. For two halves use #ff0000 0%, #ff0000 50%, #0000ff 50%, #0000ff 100%.
Tips
- Repeat the first color at 100% to avoid a seam at the start angle.
- Rotate with the start angle instead of moving the stops.
- Pie slices made this way are decoration: put the real numbers in text too.
Frequently asked questions
What is a conic gradient?
A conic gradient puts the colors around a center point, like the face of a clock, instead of along a line. The position of each stop is an angle: 0% is the start angle and 100% is the full turn.
How do I make a pie chart?
Give each slice two stops at its edges: for example red 0%, red 40%, blue 40%, blue 100%. Equal positions make a sharp edge. Add border-radius: 50% to the element to make it round.
What does the start angle do?
It rotates the whole gradient. At 0° the first color starts at the top and runs clockwise; at 90° it starts at the right.
What does Blend in change?
By default browsers blend in sRGB. Choosing OKLab or OKLCH adds "in oklab" or "in oklch" to the code for smoother, more even transitions. Browsers that do not know that syntax ignore the whole rule, so keep a fallback line.
Do all browsers support conic-gradient()?
All current browsers do. The interpolation-space syntax is newer than the gradient itself.