This playground needs a WebGL2 context. The material cannot be rendered here, but
LiquidGlassWebGL.isSupported() reports the same thing in your own app so you
can fall back to a CSS surface.
Material lab
Liquid Glass
A small physics playground for translucent surfaces.
Performance
this frame
Frame rate
idle
CPU per frame
—
Drawing buffer
—
Device ratio
—
Components
—
Backdrop
—
A static scene reports idle: dirty tracking skips the GPU entirely
until something actually changes.
Scene
01 / 08
PNG, JPG, WebP, MP4, WebM
Components
select, then arrow keys
View
Natural landscape
Debug view
shader output
Material
live controls
Drag components together: inside the fusion distance they form one surface, so the silhouette,
refraction and highlight flow through a shared bridge. A gap only closes while it is narrower
than about half the fusion distance.
Keyboard: Tab to the stage, [] to cycle components,
arrows to move, Shift for ten pixels, Alt to resize,
Delete to remove. Double click a parameter name to reset just that one.