Liquid Glass CSS Generator

Scroll-following live glass refraction with pure CS

9 followers

Scroll-following live glass refraction with pure CS

9 followers

Free tool that bends the page behind your element in real time using backdrop-filter and SVG feDisplacementMap. The distortion follows the scroll. Copy ready-to-paste HTML/CSS for liquid glass buttons and cards.

Liquid Glass CSS Generator gallery image

Launch tags:Design Tools•Developer Tools

Launch Team

Customer.ioAutomate Messaging Everywhere — Startups Get 12 Months Free

Promoted

Hunter

📌

Hey Product Hunt! 👋 I built this free Liquid Glass CSS Generator because most "glass" effects on the web are just a static blur. I wanted real refraction that bends the actual page behind an element — and because it uses backdrop-filter + an SVG displacement map (no baked image), the distortion follows the scroll live in Chromium. You pick a shape (button, pill, circle, or card), tune the distortion, blur, tint and edge highlight, then copy self-contained HTML + CSS with no dependencies. Safari/Firefox gracefully fall back to a frosted look so layouts never break. Would love your feedback on the presets and which shapes you'd like added next!

Report

12d ago

Looks impressive, one of the small set of tools which can actually render liquid glass instead of just blur!

Report

11d ago

Hunter

@bogdan_stefanjuk

Appreciate it, Bogdan! The SVG displacement map + backdrop-filter combo was the trick — without it, it's just a frosted pane, not real liquid glass. Glad it reads that way! 🍻

Report

11d ago

Reviews