Lava lamp background
Warm blobs rising, stretching and melting into each other across the whole screen, in pure HTML and CSS.
Settings
Code
<div class="pt-lava"><svg width="0" height="0" style="position:absolute"><filter id="pt-lava-f"><feGaussianBlur in="SourceGraphic" stdDeviation="18"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 26 -11"/></filter></svg><b><i style="left:5.1%;--z:18.1cqmin;--t:17.9s;--dl:-8.7s"></i><i style="left:80.1%;--z:13.8cqmin;--t:13.7s;--dl:-17.8s"></i><i style="left:71.1%;--z:13.5cqmin;--t:21.0s;--dl:-17.0s"></i><i style="left:15.6%;--z:10.6cqmin;--t:20.5s;--dl:-14.7s"></i><i style="left:10.2%;--z:19.5cqmin;--t:20.9s;--dl:-21.2s"></i><i style="left:67.8%;--z:16.1cqmin;--t:22.0s;--dl:-21.1s"></i><i style="left:44.3%;--z:15.2cqmin;--t:13.1s;--dl:-13.1s"></i><i style="left:56.7%;--z:19.9cqmin;--t:13.3s;--dl:-1.8s"></i><i style="left:13.1%;--z:12.5cqmin;--t:21.3s;--dl:-21.2s"></i><i style="left:62.1%;--z:17.9cqmin;--t:14.5s;--dl:-3.6s"></i><u></u><u></u></b></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
Where to use it
Where the lava lamp loader is a small object, this background fills the whole screen with slow, melting shapes. It gives a psychedelic, retro glow to a music festival’s site, the page of an independent record label or the hero of a cocktail bar. The blobs rise from a pool at the bottom and merge on the way up.
It is a strong visual, so let it own a section, like the hero or the ticket banner, rather than sit behind long text. Lower the density for fewer, larger blobs. Warm oranges feel classic, while pink and electric blue feel more like a club night.