Liquid Glass Generator
Liquid Glass-inspired surfaces: frost blur, noise distortion or a chromatic lens — drag the card to see it refract.
Lens refraction works in Chromium browsers; Safari/Firefox fall back to frosted blur.
Drag me around — the glass refracts whatever is behind.
How the Liquid Glass Generator Works
Design Liquid Glass-inspired surfaces visually — frost, distortion, chromatic refraction — and copy production-ready CSS.
Three Render Modes
Frosted is pure-CSS glassmorphism that works everywhere including Safari. Liquid adds SVG noise distortion for a wet-glass ripple. Lens builds a chromatic refraction map for the closest Liquid Glass look.
Noise Distortion
A procedural feTurbulence texture displaces the blurred backdrop — frequency controls the ripple size, strength controls how far light bends.
Draggable Preview
The glass card floats over a colorful scene — drag it around to see how the material refracts different content behind it.
Production Code
Every mode exports complete, paste-ready code: the CSS class plus the SVG filter when one is needed, with -webkit- fallbacks for Safari.
Frequently Asked Questions
A dynamic material language popularized by Apple: translucent surfaces that blur, saturate and subtly refract the content behind them, with bright inner edges and soft depth. On the web it is approximated with backdrop-filter and SVG filters.
Frosted for anything critical — it works in all modern browsers. Liquid degrades gracefully: browsers that cannot apply the SVG filter still show the frosted blur. Lens is a Chromium-only showcase; keep the -webkit- fallback line for Safari.
The refraction map is an encoded SVG gradient sized to the element — it tells the displacement filter where the edges are. If you resize the element, regenerate the code with matching width and height.
Blur and saturation are GPU-composited and cheap for a few elements. Displacement filters are heavier — avoid animating them on large surfaces and prefer one or two glass panels per view.