Skip to content
Musterli

Dark

Volcano gradient

Glowing orange at the bottom edge, fading upwards into charred darkness.

Customize in the editor

Change angle, shape and colors, then export as CSS, SVG or PNG.

Colors

The color stops of the gradient. Click a value to copy it.

  1. Color 1

    Text in black, contrast 8.0:1

  2. Color 2

    Text in white, contrast 7.7:1

  3. Color 3

    Text in white, contrast 18.1:1

Code

Paste the lines into your element's rule. The first line is a fallback color, the second the gradient for every browser, the third interpolates in OKLCH for modern browsers.

CSS

background-color: #ed8725;
background-image: radial-gradient(ellipse at 50% 100%, #ed8725 0%, #eb8424 5.56%, #e47c23 11.11%, #da6f21 16.67%, #cd6020 22.22%, #be501f 27.78%, #b0411f 33.33%, #a4351e 38.89%, #9d2d1e 44.44%, #9a2a1e 50%, #96291e 55.56%, #8b281d 61.11%, #7a251b 66.67%, #652118 72.22%, #511d16 77.78%, #3e1913 83.33%, #2f1510 88.89%, #25120f 94.44%, #22110e 100%);
background-image: radial-gradient(ellipse at 50% 100% in oklch, #ed8725 0%, #eb8424 5.56%, #e47c23 11.11%, #da6f21 16.67%, #cd6020 22.22%, #be501f 27.78%, #b0411f 33.33%, #a4351e 38.89%, #9d2d1e 44.44%, #9a2a1e 50%, #96291e 55.56%, #8b281d 61.11%, #7a251b 66.67%, #652118 72.22%, #511d16 77.78%, #3e1913 83.33%, #2f1510 88.89%, #25120f 94.44%, #22110e 100%);

Tailwind

bg-[#ed8725] bg-[radial-gradient(ellipse_at_50%_100%,_#ed8725_0%,_#eb8424_5.56%,_#e47c23_11.11%,_#da6f21_16.67%,_#cd6020_22.22%,_#be501f_27.78%,_#b0411f_33.33%,_#a4351e_38.89%,_#9d2d1e_44.44%,_#9a2a1e_50%,_#96291e_55.56%,_#8b281d_61.11%,_#7a251b_66.67%,_#652118_72.22%,_#511d16_77.78%,_#3e1913_83.33%,_#2f1510_88.89%,_#25120f_94.44%,_#22110e_100%)]

Take the gradient further

The same colors in other generators. Each card opens the editor with these colors.

Keep working with the colors

Turn the color stops into a palette or a full color scale.

How to use this gradient

Copy the CSS into the rule of the element that should carry the gradient, for example a section, a card or a button. For text on top, pick a text color with enough contrast on every color stop; the values next to the colors help you with that. In the editor you change angle, shape and easing and can also export the gradient as an image.

Similar gradients

All gradients

  • Espresso

    Warm coffee brown to near black, subtle and dark.

  • Observatory

    A deep night blue that lightens from the top.

  • Fir Forest

    Dark fir green fading almost to black, calm and refined.

  • Deep Sea

    From petrol blue into darkness, ideal behind light text.

  • Sea of Fog

    Pale, almost neutral gray with a touch of blue, like fog over the lowlands.