Liquid Glass in the Browser: Refraction with CSS and SVG
2 days ago
- #SVG
- #CSS
- #UI Effects
- Apple introduced the Liquid Glass effect during WWDC 2025, creating a UI effect that mimics curved, refractive glass.
- The article explores recreating this effect using CSS, SVG displacement maps, and physics-based refraction calculations.
- Refraction is explained via Snell–Descartes law, detailing how light bends when passing through different materials.
- The project focuses on simplified scenarios with constraints like using air as the ambient medium and glass as the material.
- Four different height functions are used to describe the glass surface, affecting the refraction effect.
- Interactive simulations demonstrate how light behaves with different surface types, emphasizing convex profiles.
- A displacement vector field is pre-calculated and normalized for use in SVG displacement maps.
- SVG displacement maps are used to render the effect, with limitations due to 8-bit channel constraints.
- A specular highlight is added to mimic shiny edges on glass, combined with refraction for the final effect.
- The effect is demonstrated in UI components like a magnifying glass, searchbox, switch, slider, and music player.
- Currently, the effect is Chrome-only due to SVG filters as backdrop-filter not being widely supported.
- The article concludes by noting the experimental nature of the project and invites feedback.