Liquid Glass on the Web with SVG Displacement Maps

The article recreates Apple’s Liquid Glass by computing refraction from surface normals and Snell’s law, then encoding the field as an SVG displacement map. It adds a simple rim-light specular, composites via SVG filters, and applies as a Chrome-only backdrop-filter. The prototype works well but is experimental, performance-costly on dynamic changes, and needs fallback strategies in non-Chromium browsers.

Key Points

• Refraction is computed from Snell’s law using a surface function and its derivative to get the normal; four bezel profiles (convex circle, convex squircle, concave, lip) shape the displacement.
• Displacement magnitude is symmetric around a circular bezel, so it’s precomputed along one radius (127 samples), normalized, then rotated to form the full field.
• The refraction field is encoded as an RG displacement map (8-bit channels, 128 neutral) and applied with feDisplacementMap; the filter’s scale equals the maximum precomputed displacement.
• A simple rim-light specular highlight is composited over the refracted result using SVG filter stages (feImage + feBlend) for artistic control.
• Full “backdrop-filter” use of SVG filters is Chrome-only, making the effect Chromium-bound for production; elsewhere, a blurred fallback can be used and dynamic updates are performance-costly.

Sentiment

The community is impressed by the technical skill and especially the article quality, but deeply skeptical about Liquid Glass as a practical UI pattern. The dominant view is impressive demo, terrible idea for production use. Performance and browser compatibility concerns reinforce the consensus that this belongs in the realm of creative exploration rather than everyday web development.

In Agreement

• The implementation is the most impressive browser-based glass effect seen, building from physics first principles rather than using cheap approximations like feTurbulence
• The interactive article format with visualizations is exceptional, on par with Bartosz Ciechanowski's work
• The CSS/SVG approach has genuine advantages over WebGL: no JS required before first paint, direct DOM integration, and build-time precomputation
• Liquid Glass can work well for specific niche use cases like magnifying glass effects, video player overlays, and floating search boxes
• The pedagogical approach focusing on the mathematics of refraction adds lasting educational value

Opposed

• Performance is too poor for real-world use — even high-end machines stutter, raising questions about deploying this on typical user hardware
• Chrome-only compatibility makes this impractical for the web, and the title is misleading since it suggests broad browser support
• Liquid Glass as a design paradigm fundamentally hurts readability and usability, sacrificing function for form
• This is just a glass shader, not the full Liquid Glass design language which includes metaball merging, tint adjustment, and layered controls
• The computational cost is unjustifiable for UI decoration — modern computers should not lag on interface chrome