Glass that bends light.
Apple-style Liquid Glass for any website. Real refraction, specular highlights and springy controls from one CSS file and one script. No framework, no build step.
Frosted glass
Live refraction
Over anything.
Glass bends whatever the browser paints beneath it: moving text, CSS animation, a ticking clock, the words you type. Nothing here is a snapshot, and nothing has to hold still.
Wednesday, 23 September
Frosted glass Yes, live: the displacement runs on the GPU every frame, so the glass follows every change beneath it. The bar at the top does the same to this page as you scroll. This browser shows the frosted tier: live and blurred, without the bend. Chrome or Edge on a computer or an Android phone shows the refraction. Refraction is switched off, so the glass shows the frosted tier: live and blurred, without the bend. Your accessibility settings ask for solid surfaces, so the glass is opaque here.
Optics
Lensing, not blur.
Thick glass bends light hardest at its edge. The rim pulls in what lies just beyond the border and compresses it into a bright band, while the centre stays calm. Drag the glass across the page and watch the edges.
- Bezel
- A quarter of the short side, 6–24 px
- Reach
- Reaches 0.7 × the bezel past its edge
- Corners
- Seam-free for any
border-radius
Sampling
Materials
Regular. Clear. Tinted.
One set of optics, three recipes. Regular frosts and adapts its tone. Clear keeps the view and dims it just enough to read. Tinted carries colour, for the one action that matters most.
Regular
Frosted and saturated. Flips light or dark with what’s behind it.
Clear
Barely blurred. A 35% dim keeps labels legible over bright media.
Tinted
Colour with a contrast-safe label. One per bar, for the primary action.
Samples only. Like Apple, keep glass on the navigation and control layer, not on your content.
Controls
Touch it and it lifts.
Press a thumb and it becomes a lens that magnifies what it covers, stretches with your speed and settles on a spring. Underneath, every control is a native input, so keyboards and screen readers just work.
Magnifier
A lens you can hold.
<glass-lens> magnifies what’s under it with a real zoom field, a refracting rim and a trace of colour at the edge. Drag it, flick it, or move it with the arrow keys.
Needs live refraction (Chromium).
Experimental
Glass that merges.
Shapes in a glass container fuse like droplets when they get close, then pull apart on a spring. Drag a button toward its neighbours, or collapse the toolbar.
Merging needs live refraction. Elsewhere the buttons stay separate capsules and morph with their matching ids.
Accessibility
Respects every setting.
Reduce Transparency, Increase Contrast and Reduce Motion each get the treatment Apple gives them. Not every browser reports Reduce Transparency to web pages, so the library also takes a manual switch. Try them on this page.
Clear ↔ Tinted goes all the way to pure clear: no frost, no fill and no colour fringe, only the bend at the rim, the highlights and the shadow. Chromatic aberration is a separate setting, off by default: it adds a colour fringe to the refracting rim of every glass (Chromium), at any Clear ↔ Tinted setting, and leaves the centre clean.
Your system settings are applied automatically.
Get started
Two files. One class.
Add the stylesheet and the script, then put .glass on anything. The CSS alone gives frosted glass in every modern browser; the script adds refraction, highlights that follow each shape, adaptive tone and the controls.
index.html
<!-- in <head> -->
<link rel="stylesheet" href="liquid-glass.css">
<script src="liquid-glass.js" defer></script>
<!-- anywhere in <body> -->
<nav class="glass glass-bar">…</nav>
<button class="glass glass-button glass-prominent" data-glass-interactive>Buy</button>
<label class="glass-switch"><input type="checkbox" role="switch"> Wi‑Fi</label>
<glass-lens size="140" zoom="1.5"></glass-lens>- No dependenciesVanilla JS and CSS. No build step, no network requests.
- Native underneathReal buttons, checkboxes, ranges and dialogs keep their semantics.
- Degrades gracefullyRefraction in Chromium, frosted glass elsewhere, solid when settings ask for it.
Using ES modules? Keep liquid-glass.mjs next to liquid-glass.js and import LiquidGlass from './liquid-glass.mjs'.
Under the hood
What your browser is doing.
Live numbers from the library on this page: which tier each piece of glass renders, why, and what it costs.
Glass on this page
| Element | Section | Tier | Reason |
|---|