Loading...

Liquid Glass

SVG displacement map glass refraction on live HTML

Inspired by Apple's Liquid Glass design language and Aave's web implementation.

On the left is the refracted result, on the right the map that drives it.

Red and green encode per-pixel displacement — how far each pixel bends horizontally and vertically. A neutral 50% grey means no bend. Blue is a specular shine field that a second filter pass lifts it into a rim highlight.

Width70.0
Height60.0
BorderRadius28.0
Scale0.100
Depth10.0
Curvature40.0
Splay1.00
Chroma0.20
Blur0.0
Glow0.10
Edge Highlight0.25
Specular Angle45.0
Image Refraction

Drag the lens over the image. The displacement map creates a classic refraction effect.

Width60.0
Height68.0
BorderRadius40.0
Scale0.120
Depth10.0
Curvature40.0
Splay1.00
Chroma0.20
Blur0.0
Glow0.10
Edge Highlight0.25
Specular Angle45.0

GLASS

Live HTML Refraction

The SVG filter bends live DOM text without rasterization. The text remains fully selectable.

Width92.0
Height52.0
BorderRadius40.0
Scale0.070
Depth10.0
Curvature40.0
Splay1.00
Chroma0.15
Blur0.0
Glow0.10
Edge Highlight0.25
Specular Angle45.0
Text content
Pro
BALANCE
$12,450.00
UI Refraction

Animated elements demonstrate real-time refraction on CSS gradients.

Width60.0
Height70.0
BorderRadius32.0
Scale0.120
Depth10.0
Curvature40.0
Splay1.00
Chroma0.20
Blur0.0
Glow0.10
Edge Highlight0.25
Specular Angle45.0