Free tool
Liquid glass CSS generator
Set the shape, drag it over a backdrop and copy the code: an SVG displacement filter through backdrop-filter, with the CSS frost fallback for Safari and Firefox. Real refraction at the edge, not blur.
Drawing the displacement map…How it works
The generator draws a displacement map for the size and shape you set. Each pixel inside the bezel stores how far, and which way, the backdrop shifts: inward, most at the outer edge. An SVG filter feeds the map to feDisplacementMap, then blurs and saturates the result, and backdrop-filter: url(#liquid-glass) applies it to whatever lies behind the element.
The middle of the body stays clear and only the bezel bends. That is what separates liquid glass from plain blur, and from noise-based water effects that wobble the whole surface.
The numbers
Bezel is the width of the band that bends, at most the corner radius. Displacement is the shift at the outer edge; past the fold limit (bevel 0.5 × bezel, convex 0.67, rim 0.17) the rim doubles lines instead of curving them, so the slider stops there. Frost is the blur after the bend: small controls get almost none, text-heavy panels more.
The presets are the tested numbers from the Meniscus component specs: a capsule button's bezel is half its height, a tab bar's is 22 px, a panel's equals its radius, a lens is convex.
Browser support
Chromium browsers (Chrome, Edge, Arc, Opera, Brave) render an SVG filter inside backdrop-filter. Safari and Firefox do not, so the snippet keeps the CSS frost there (blur, saturation, fill and rim) and switches the filter on only in Chromium. For a bend in every browser over a known backdrop, such as an image, a video or a scene you draw, use the WebGL shader in the web recipe.
Beyond one element
The fixed-size snippet suits a button or a bar that never changes size. When the size changes the map must too: the Any size tab has the map function and a ResizeObserver that rebuilds the filter.
For whole screens, connect Meniscus to Claude Code, Cursor or Codex. Your assistant gets the specs, states and code for 34 components and builds them in your stack, web, SwiftUI, Flutter, React Native or Figma, then checks its own screenshot against the spec.
Questions
Is this Apple's Liquid Glass?
It reproduces the look on the web: the bend at the edge, the frost and the rim light, with numbers tuned to iOS 27. On iOS 26 and later Apple's own material is drawn by the system; in SwiftUI use .glassEffect instead.
Why does it look like plain blur in Safari?
Safari and Firefox don't apply SVG filters inside backdrop-filter, so they show the frost fallback. Open the page in Chrome or Edge to see the bend; the code you copy bends there.
Can I use the code in commercial projects?
Yes, in any project, commercial or not, with no attribution required.
Does it hurt performance?
One filter per body costs little, but each one redraws when what lies behind it changes. Keep glass to the floating controls layer, a few bodies per screen, and drop the filter from bodies that are off screen.
Does it work with Tailwind or React?
Yes. The markup is plain HTML, so rename the classes or keep the stylesheet. For React, the web recipe has a component that sizes the map to the element.