Color Wheel Gradient
CSS
background: conic-gradient(from 0deg, #ef4444 0%, #eab308 25%, #22c55e 50%, #3b82f6 75%, #ef4444 100%);Open in Gradient Maker →
Other formats
CSS custom property
--gradient-color-wheel: conic-gradient(from 0deg, #ef4444 0%, #eab308 25%, #22c55e 50%, #3b82f6 75%, #ef4444 100%);
Tailwind arbitrary value
bg-[conic-gradient(from_0deg,_#ef4444_0%,_#eab308_25%,_#22c55e_50%,_#3b82f6_75%,_#ef4444_100%)]
Same colours, other shapes
The same stops passed through the other gradient functions — copy whichever suits the surface.
Reversed direction
background: conic-gradient(from 180deg, #ef4444 0%, #eab308 25%, #22c55e 50%, #3b82f6 75%, #ef4444 100%);Linear
background: linear-gradient(0deg, #ef4444 0%, #eab308 25%, #22c55e 50%, #3b82f6 75%, #ef4444 100%);Radial
background: radial-gradient(circle, #ef4444 0%, #eab308 25%, #22c55e 50%, #3b82f6 75%, #ef4444 100%);Text on this gradient
Aa
1.92:1
Aa
5.02:1
Measured against every stop, near-black text holds a worst-case contrast of 5.02:1 on this gradient. Passes WCAG AA for body text (4.5:1).
Color stops
About this gradient
Color Wheel is a ready-to-use CSS gradient with 5 color stops. Copy the CSS below, open it in the Gradient Maker to tweak the angle and stops, or click any stop color for its full breakdown.
More gradients