Modelo 1973

HTML + CSSLiquid Glass

Lava lamp with switch

A glass bottle where warm wax rises, falls and melts together; switch it on and the wall glows with its light.

Settings

16px
1x

Code

<div class="uvq11-lava on"><svg class="df" width="0" height="0" aria-hidden="true"><filter id="uvq11-goo"><feGaussianBlur stdDeviation="6"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 24 -10"/></filter></svg><i class="gw" aria-hidden="true"></i><div class="lp" aria-hidden="true"><i class="cap"></i><span class="vs"><span class="lq"><span class="bl"><i style="--x:22%;--s:1.7em;--d:11;--dl:-2"></i><i style="--x:55%;--s:1.3em;--d:14;--dl:-7"></i><i style="--x:38%;--s:2.1em;--d:17;--dl:-11"></i><i style="--x:62%;--s:1.1em;--d:9;--dl:-4"></i><i style="--x:30%;--s:1em;--d:12;--dl:-9"></i><i style="--x:48%;--s:1.5em;--d:20;--dl:-15"></i></span></span><i class="gx"></i></span><i class="bs"></i></div><div class="tx"><p class="nm">Model 1973</p><button type="button" class="ch" role="switch" aria-checked="true"><i class="led"></i>Light</button></div></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.

Markdown version with all the code, for AI assistants

More in Liquid Glass

See all Liquid Glass

Where to use it

A seventies lava lamp built from CSS shapes: a brass cap and base and a tapered glass bottle with vertical highlights. Inside, round blobs rise and sink at different speeds and an SVG gooey filter fuses them like real wax. Turning the switch off pauses the wax, dims the liquid and fades the warm glow on the wallpaper.

Pick the wax and liquid colors to go from classic orange and purple to green or blue. The speed control slows the drift for a calmer loader or ambient header, and the switch is an accessible toggle.