Experimental component · Phase 1
Testing a refractive surface that bends and softens the backdrop to create a liquid-glass effect. This browser is using the CSS blur, saturation, and translucent-surface fallback instead.
Live controls
Changes apply to every glass sample below. Set surface fill to 0% for fully transparent glass.
Resizable surface
Use the dotted handle to move the surface across the backdrop, then drag the lower-right corner to confirm that the displacement map follows its actual dimensions.
Popover scale
Drag the menu across the stage to test dense rows, small radii, and text contrast.
Dialog scale
Move the dialog across the colour field to check shadows, copy, controls, and fallback legibility.
Confirm change
This will make the selected appearance available to everyone in the workspace.
Photographic backdrops
Drag each panel over high-contrast edges, fine textures, and changing colour to compare the enhanced refraction with the CSS-only fallback.
Photo by Christopher Politano on Unsplash Travel card
Photographic detail makes the refractive rim and the stable reading area much easier to compare.
Photo by Manny Moreno on Unsplash Activity panel
Move the panel over foam, deep water, sand, and people to see the filter respond to rapid texture changes.
Photo by Gérard GRIFFAY on Unsplash Location preview
Hard edges, repeated windows, and saturated colour reveal displacement more clearly than a soft gradient.
Phase 1 boundary