Liquid glass on the web: Canvas, WebGPU and no CSS blur 💧
The experimental liquid-dom library creates liquid-glass effects over HTML using Canvas and WebGPU/WebGL.
An extremely interesting library called liquid-dom has been released. It lets you create a genuine liquid-glass effect, Liquid Glass, right over your markup.
This is not just a clever CSS backdrop-filter: blur(), but a full fluid simulation. The library reads the page’s HTML structure, transfers it to Canvas, and uses WebGPU/WebGL to render physically accurate refractions, highlights and droplets in real time.
The technology is still experimental, the API may change, and it is not yet ready for full production use. But as a demonstration of what modern browser graphics APIs can do, it is a delight.
Source code on GitHub
Get lost in the demos
What do you think of this UI trend? Would you find a use for graphics this heavy in real projects, for example on promotional pages, or is CSS blur still more than enough? 👇