Sunfire Ring Gradient: CSS Code & Colors

Q: What's the CSS code for the Sunfire Ring gradient?

Use background: conic-gradient(from 315deg, #4A0E00 0%, #D62828 25%, #F77F00 50%, #FCBF49 75%, #4A0E00 100%);. RGBA and HSLA versions are also available on this page.

Sunfire Ring Gradient

Conic sweep of deep red through orange into pale gold.

Customize this gradient →

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

Color Stops

#4A0E00

#D62828

#F77F00

#FCBF49

#4A0E00

Sunfire Ring CSS Code

background: #4A0E00;
background: conic-gradient(from 315deg, #4A0E00 0%, #D62828 25%, #F77F00 50%, #FCBF49 75%, #4A0E00 100%);

background: rgba(74, 14, 0, 1.0);
background: conic-gradient(from 315deg, rgba(74, 14, 0, 1.0) 0%, rgba(214, 40, 40, 1.0) 25%, rgba(247, 127, 0, 1.0) 50%, rgba(252, 191, 73, 1.0) 75%, rgba(74, 14, 0, 1.0) 100%);

background: hsla(11, 100%, 15%, 1.0);
background: conic-gradient(from 315deg, hsla(11, 100%, 15%, 1.0) 0%, hsla(0, 69%, 50%, 1.0) 25%, hsla(31, 100%, 48%, 1.0) 50%, hsla(40, 97%, 64%, 1.0) 75%, hsla(11, 100%, 15%, 1.0) 100%);

background: #4A0E00;
background: conic-gradient(from 315deg, #4A0E00 0%, #D62828 25%, #F77F00 50%, #FCBF49 75%, #4A0E00 100%);
background: conic-gradient(from 315deg in oklch, oklch(27.11% 0.0931 35.9) 0%, oklch(56.76% 0.2084 27.06) 25%, oklch(71.94% 0.1794 54.4) 50%, oklch(84.01% 0.1475 80.45) 75%, oklch(27.11% 0.0931 35.9) 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,#4A0E00_0%,#D62828_25%,#F77F00_50%,#FCBF49_75%,#4A0E00_100%)]

bg-[conic-gradient(from_315deg,#4A0E00_0%,#D62828_25%,#F77F00_50%,#FCBF49_75%,#4A0E00_100%)]

Similar Gradients

More Gradient Presets

FAQ

What is the Sunfire Ring gradient?