Lava Lamp Gradient: CSS Code & Colors

Q: What's the CSS code for the Lava Lamp gradient?

Use background: radial-gradient(at 20% 39%, #FF512F, transparent 70%), radial-gradient(at 80% 61%, #C21500, transparent 70%), #0D0D0D;. RGBA and HSLA versions are also available on this page.

Lava Lamp Gradient

Warm molten mesh blobs drifting over a near-black backdrop.

Customize this gradient →

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

Color Stops

#FF512F

#C21500

Background
#0D0D0D

Lava Lamp CSS Code

background: #0D0D0D;
background: radial-gradient(at 20% 39%, #FF512F, transparent 70%), radial-gradient(at 80% 61%, #C21500, transparent 70%), #0D0D0D;

background: rgba(13, 13, 13, 1.0);
background: radial-gradient(at 20% 39%, rgba(255, 81, 47, 1.0), transparent 70%), radial-gradient(at 80% 61%, rgba(194, 21, 0, 1.0), transparent 70%), rgba(13, 13, 13, 1.0);

background: hsla(0, 0%, 5%, 1.0);
background: radial-gradient(at 20% 39%, hsla(10, 100%, 59%, 1.0), transparent 70%), radial-gradient(at 80% 61%, hsla(6, 100%, 38%, 1.0), transparent 70%), hsla(0, 0%, 5%, 1.0);

background: #0D0D0D;
background: radial-gradient(at 20% 39%, #FF512F, transparent 70%), radial-gradient(at 80% 61%, #C21500, transparent 70%), #0D0D0D;
background: radial-gradient(at 20% 39% in oklch, oklch(67.37% 0.2157 33.01), transparent 70%), radial-gradient(at 80% 61% in oklch, oklch(51.76% 0.2038 30.64), transparent 70%), oklch(15.91% 0 none);

The same gradient with its colors in OKLCH. Older browsers show the standard version. How OKLCH gradients work →

bg-[image:radial-gradient(at_20%_39%,#FF512F,transparent_70%),radial-gradient(at_80%_61%,#C21500,transparent_70%)] bg-[#0D0D0D]

bg-[image:radial-gradient(at_20%_39%,#FF512F,transparent_70%),radial-gradient(at_80%_61%,#C21500,transparent_70%)] bg-[#0D0D0D]

Similar Gradients

More Gradient Presets

FAQ

What is the Lava Lamp gradient?