A transparent liquid glass effect combines backdrop-filter with the SVG feDisplacementMap filter to refract and blur the pixels of the page sitting behind an element, like a lens. Because nothing is baked into an image, the distortion follows the scroll as the content underneath moves.
WebGL vs CSS (this tool)
There are two main ways to build "Liquid Glass" on the web. Pick by use case.
| Aspect | WebGL version (liquid-glass-generator) | This tool (CSS / backdrop-filter) |
|---|---|---|
| What is refracted | A background image baked into a canvas | The actual page behind it (live) |
| Follows the scroll | No (background is fixed) | Yes (Chromium) |
| Output code | <canvas> + JS (ogl) | <a>/<div> + CSS / SVG |
| Best for | Hero and card showpieces | Headers and floating UI |
| Browsers | WebGL everywhere | Refraction in Chromium, frosted fallback elsewhere |
How to use (3 steps)
- Pick a shape (button / pill / circle / card) and size
- Tune distortion, blur, tint and edge highlight
- Copy the generated HTML and CSS and paste them in
FAQ
Which browsers show the live refraction?
The refraction that bends backdrop pixels works in Chromium browsers (Chrome, Edge). Safari and Firefox don't support url() filters in backdrop-filter, so they fall back to a blur + tint frosted glass (the layout never breaks).
How is this different from the WebGL Liquid Glass Generator?
The WebGL version bakes a background image into a canvas (good for fixed-background heroes and cards). This tool refracts the live page with backdrop-filter, so the distortion follows the scroll — ideal for headers and floating UI.
Do I need a background image?
No. It refracts whatever page content is behind the element, so it adapts to wherever you paste it.
Does it refract on mobile (iOS Safari)?
iOS Safari uses WebKit, so the refraction doesn't appear and it falls back to a frosted look. Avoid designs that depend on the distortion.
Does the clickable area match the glass shape?
Yes. Add a link URL and it outputs an <a> with clip-path so the clickable area matches the rounded or circular shape exactly.
Can I use the generated code as-is?
Yes. Copy the HTML (markup + SVG filter) and the CSS and paste them. No external dependencies — it's self-contained.