Dragon Fire Gradient: CSS Code & Colors

Q: What's the CSS code for the Dragon Fire gradient?

Use background: linear-gradient(45deg, #200122 0%, #6F0000 30%, #C21500 65%, #FFB347 100%);. RGBA and HSLA versions are also available on this page.

Dragon Fire Gradient

Deep plum smoldering into blazing orange.

Customize this gradient →

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

Color Stops

#200122

#6F0000

#C21500

#FFB347

Dragon Fire CSS Code

background: #200122;
background: linear-gradient(45deg, #200122 0%, #6F0000 30%, #C21500 65%, #FFB347 100%);

background: rgba(32, 1, 34, 1.0);
background: linear-gradient(45deg, rgba(32, 1, 34, 1.0) 0%, rgba(111, 0, 0, 1.0) 30%, rgba(194, 21, 0, 1.0) 65%, rgba(255, 179, 71, 1.0) 100%);

background: hsla(296, 94%, 7%, 1.0);
background: linear-gradient(45deg, hsla(296, 94%, 7%, 1.0) 0%, hsla(0, 100%, 22%, 1.0) 30%, hsla(6, 100%, 38%, 1.0) 65%, hsla(35, 100%, 64%, 1.0) 100%);

background: #200122;
background: linear-gradient(45deg, #200122 0%, #6F0000 30%, #C21500 65%, #FFB347 100%);
background: linear-gradient(45deg in oklch, oklch(17.48% 0.0774 325.74) 0%, oklch(34.02% 0.1396 29.23) 30%, oklch(51.76% 0.2038 30.64) 65%, oklch(82.08% 0.1486 72.1) 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-linear-[45deg,#200122_0%,#6F0000_30%,#C21500_65%,#FFB347_100%]

bg-[linear-gradient(45deg,#200122_0%,#6F0000_30%,#C21500_65%,#FFB347_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Dragon Fire gradient?