Liquid Glass CSS Generator｜Scroll-following live refraction with backdrop-filter (free)

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.

Shape

Button<br>Pill<br>Circle<br>Card

Size & distortion

Width

Height

Corner radius

Distortion

Edge width

Blur

Appearance

Saturation

Tint color

Opacity

Edge highlight

Border

Text & link

Label

Link URL (empty = dummy)

Text color

Font size

checking…

Photo<br>Text<br>Colorful

↓ Scroll: the backdrop moves and the distortion follows

HTML<br>Copy HTML

CSS<br>Copy CSS

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.

AspectWebGL version (liquid-glass-generator)This tool (CSS / backdrop-filter)

What is refractedA background image baked into a canvasThe actual page behind it (live)<br>Follows the scrollNo (background is fixed)Yes (Chromium)<br>Output code + JS (ogl)/ + CSS / SVG<br>Best forHero and card showpiecesHeaders and floating UI<br>BrowsersWebGL everywhereRefraction 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?<br>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?<br>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?<br>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)?<br>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?<br>Yes. Add a link URL and it outputs an with clip-path so the clickable area matches the rounded or circular shape exactly.

Can I use the generated code as-is?<br>Yes. Copy the HTML (markup + SVG filter) and the CSS and paste them. No external dependencies — it's self-contained.

Related tools

Liquid Glass Generator (WebGL)<br>clip-path Generator<br>CSS Animation Gallery<br>CSS Grid Generator<br>Flexbox Generator