Live component demo
liquid-glass.js Web Component Demos
Download Back To CSSScript.Com
Shape, tint, drag, and tune real-time liquid glass across two rendering engines and a complete set of adaptive interface components.
01 / Optical lab
Tune the material.
Adjust every primary optical property. Drag the glass within the scene to test viewport-aware movement.
Live atmosphereWEBGL active
18°
Drag within the scene
02 / Surface profiles
Four edge behaviors.
Each profile reshapes the refraction field while preserving independent filters and isolated rendering.
01
02
03
04
03 / Components
Controls with depth.
Button states and the adaptive card component retain tactile feedback, blur, tint, and content flexibility.
Liquid buttons
Liquid card
Signal variation
+24.7
Optical response across the current field
04 / Adaptive sizing
Hug or hold a frame.
Content-hugging elements and fixed dimensions can run together without shared filter conflicts.
Container alias
Content-hugging glass
310 × 210Fixed glass frame