Liquid Glass
SVG displacement map glass refraction on live HTMLInspired 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
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
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
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
