Skip to main content
CSS Tip

A color wheel with gradient

Use conic-gradient() and the new color interpolation to create a nice color wheel 🤩

A color wheel made conic-gradient

.box {
background: conic-gradient(in hsl longer hue,red 0 0);
}

✅ Tell the browser to take the longer route between red and red

❌ No complex color combination

See the Pen Color wheel by Temani Afif (@t_afif) on CodePen.