Liquid Glass Lab

June 29, 2026

Kube's published Liquid Glass Switch and Slider implementation with SVG-first refraction, a WebGL2 fallback, and accessible CSS fallbacks.

Lens

Use the arrow keys to move the lens horizontally and vertically.Lens position 62% horizontal and 47% vertical.
Parameters

Uses the Kube Liquid Glass parameter names and ranges, with your Lens material, geometry, and optics defaults.

Lens tuning

Previous geometry and optical controls.

px
×
px
deg
%
px
px
%
Gesture lens
Glass border
Force fallback

The draggable lens combines a center-zoom field with a separate bezel-refraction field. Direct contact flexes the geometry from the touch point while its specular sheen stays broad instead of forming a click spot. It now opens with the captured Lens preset: zero specular and tint, 0.03 refraction, a 40px bezel, and 71px thickness. Supported Chromium contexts use the SVG backdrop path; Safari and Chromium contexts without SVG URL backdrop filtering render the same displacement, center-zoom, and specular maps through an on-demand WebGL2 shader. Its mesh follows the site's global theme in both renderers.

Switch

Parameters

Uses the Kube Liquid Glass parameter names and ranges, with the article's switch defaults.

Force active
Switch state
Glass border
Force fallback

The switch now uses the article's shipped lip displacement and specular maps, filter scale, dimensions, colors, and elastic drag geometry. The thumb is white at rest and expands into transparent refractive glass while pressed. The SVG filter remains the primary renderer; Safari and Chromium contexts without SVG URL backdrop filtering use the same optical maps through the on-demand WebGL2 material. Its mesh backdrop follows the site's global theme.

Slider

Parameters

Uses the Kube Liquid Glass parameter names and ranges, with the article's slider defaults.

Force active
10%
Glass border
Force fallback

The slider uses the article's shipped convex displacement and specular maps, 90×60 thumb, 330px rail geometry, and 10% starting value. It keeps accessible pointer and keyboard slider semantics while using the article defaults: 0.40 opacity, 7 saturation, 1.00 refraction, and 0.0 blur. The SVG filter remains the primary renderer; Safari and Chromium contexts without SVG URL backdrop filtering use the same optical maps through the on-demand WebGL2 material. The mesh backdrop follows the global theme so its refraction stays visible in both contrast modes.