Liquid Glass
Refraction with CSS and SVG — Pure HTML/CSS/JS Demo
filter property
instead of backdrop-filter, making it work in
Firefox and Chrome. (Pardon me, Safari is broken for
whatever reasons)
Interactive Magnifying Glass
Liquid Glass—Precision Lens
Drag the capsule to bend the page. This lens is a compact SVG displacement rig that refracts whatever sits beneath it.
The field comes from a rounded bezel profile; pixels are pushed along its gradient, then topped with a subtle specular bloom for depth.
Sweep across strong edges—high contrast makes the bend snap.
Liquid Glass—Precision Lens
Drag the capsule to bend the page. This lens is a compact SVG displacement rig that refracts whatever sits beneath it.
The field comes from a rounded bezel profile; pixels are pushed along its gradient, then topped with a subtle specular bloom for depth.
Sweep across strong edges—high contrast makes the bend snap.