Sunset Wheel Gradient: CSS Code & Colors

Q: What's the CSS code for the Sunset Wheel gradient?

Use background: conic-gradient(from 315deg, #FFD93D 0%, #FF8C42 33%, #E4572E 67%, #FFD93D 100%);. RGBA and HSLA versions are also available on this page.

Sunset Wheel Gradient

Conic sweep of gold through orange into deep red.

Customize this gradient →

Opens it in the generator: change the type or direction, adjust the colors, then copy the CSS or download.

Color Stops

#FFD93D

#FF8C42

#E4572E

#FFD93D

Sunset Wheel CSS Code

background: #FFD93D;
background: conic-gradient(from 315deg, #FFD93D 0%, #FF8C42 33%, #E4572E 67%, #FFD93D 100%);

background: rgba(255, 217, 61, 1.0);
background: conic-gradient(from 315deg, rgba(255, 217, 61, 1.0) 0%, rgba(255, 140, 66, 1.0) 33%, rgba(228, 87, 46, 1.0) 67%, rgba(255, 217, 61, 1.0) 100%);

background: hsla(48, 100%, 62%, 1.0);
background: conic-gradient(from 315deg, hsla(48, 100%, 62%, 1.0) 0%, hsla(23, 100%, 63%, 1.0) 33%, hsla(14, 77%, 54%, 1.0) 67%, hsla(48, 100%, 62%, 1.0) 100%);

background: #FFD93D;
background: conic-gradient(from 315deg, #FFD93D 0%, #FF8C42 33%, #E4572E 67%, #FFD93D 100%);
background: conic-gradient(from 315deg in oklch, oklch(89.25% 0.1667 94.55) 0%, oklch(75.36% 0.1637 50.4) 33%, oklch(63.72% 0.1838 36.48) 67%, oklch(89.25% 0.1667 94.55) 100%);

The same colors blended in OKLCH, so this one looks more vivid than the gradient above. Older browsers show the standard gradient. How OKLCH gradients work →

bg-[conic-gradient(from_315deg,#FFD93D_0%,#FF8C42_33%,#E4572E_67%,#FFD93D_100%)]

bg-[conic-gradient(from_315deg,#FFD93D_0%,#FF8C42_33%,#E4572E_67%,#FFD93D_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Sunset Wheel gradient?