Liquid Glass

Refraction with CSS and SVG — Pure HTML/CSS/JS Demo

⚠️
Chrome-only demo: The backdrop-filter with SVG filters currently only works in Chrome/Chromium-based browsers. Other browsers may show a fallback blur effect.

Interactive Magnifying Glass

Optics Study

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.

Abstract architectural lines
Parameters
30
150
1.50
1
0.5

Generated Maps

Displacement Map
Specular Highlight