Liquid Glass CSS Generator
日本語

Liquid glass that bends the page behind it as you scroll

Build transparent glass buttons and cards that refract the live page using backdrop-filter + SVG feDisplacementMap. Copy the HTML/CSS and paste it in.

checking…
↓ Scroll: the backdrop moves and the distortion follows

HTML

CSS

For how to use it, the difference from the WebGL version, and FAQ, see the how-to guide.
Need the baked-background WebGL version? Try the Liquid Glass Generator.