Physically based
Squircle rim, index of refraction, magnification and chromatic dispersion, computed per pixel.
Why it's different
Not a blur. It bends light.
Most "glassmorphism" frosts the background. Apple's Liquid Glass refracts it: the curved rim bends what's behind it while the centre stays clear. This library does the optics.
Moving light
Specular rims follow the pointer, or device tilt on phones, just like on iPhone.
Components
Buttons, switches, sliders, segmented controls, tab bars, toolbars and morphing menus.
Glass text
Any string becomes a lens, like the iOS 26 lock screen clock.
Progressive
Frosted fallback in Firefox and Safari, real inputs underneath, and support for reduced transparency and motion.
Tiny
No dependencies. UMD, ES modules and TypeScript types. A WebGL renderer when you need every browser.
Playground
Tune the glass
Pick a preset, adjust the optics, and copy the code. The controls are the library's own components.
Liquid Glass
Drag the glass
Components
Drop-in glass controls
Plain HTML plus LiquidGlass.init(). Press and hold: thumbs turn into magnifying lenses, selections become droplets.
Button
<button class="lg-button">Glass</button>
<button class="lg-button lg-button--prominent">…</button>Switch
<label class="lg-switch">
<input type="checkbox" checked>
</label>Slider
<div class="lg-slider">
<input type="range" value="40">
</div>Segmented control
<div class="lg-segmented">
<button>Day</button>
<button aria-pressed="true">Week</button>
</div>Tab bar
<nav class="lg-tabbar">
<a class="lg-tabbar__item" aria-current="page">…</a>
</nav>Toolbar & morphing menu
<div class="lg-menu">
<button class="lg-menu__trigger">…</button>
<div class="lg-menu__panel">…</div>
</div>Recreations
Real iPhone screens, rebuilt
Each demo has several attempts you can flip between to compare techniques, from plain CSS blur to WebGL.
Get started
Three lines
Chrome · Edge · Brave · ArcFull refraction
Firefox · SafariFrosted fallback
Any WebGL2 browserRefraction via LiquidGlassGL