liquid-glass.js

Specimens

Components

Each snippet below is the exact markup of the specimen above it. Native inputs do the work underneath, so forms, labels and keyboard support behave as usual.

Buttons

Pill, round and tinted. They swell on press.

Toolbar

One glass capsule for a row of icon buttons. <hr> divides groups, and buttons with aria-pressed toggle when tapped.

Add to library

Tooltip

Hover or focus the button. interestfor opens a popover="hint" anchored above it, with no script in current Chrome.

Wi-Fi AirDrop

Switch

The thumb turns into a lip-profile lens while pressed. Wraps a native checkbox with role="switch".

Slider

Press and drag: the thumb becomes a lens over the track. Wraps <input type="range">.

Guests 2

Stepper

Tap or hold either half. Wraps <input type="number">, so arrow keys and forms work and each half greys out at its limit.

Page dots

Swipe the slides, tap a dot, or drag across the dots to scrub. for points at any scroll-snap container and follows its pages.

Segmented control

Equal-width segments with a sliding glass indicator. Arrow keys move the selection and fire change.

Tab bar & pill nav

The same element with .lg-tabbar. Give it links instead of buttons for page navigation (aria-current), like the dock at the bottom of this page.

Search field

A label wrapping a native input, so clicking anywhere on the glass focuses it.

Context menu

data-contextmenu opens an .lg-menu right where you clicked, kept on screen. From the keyboard (menu key or Shift+F10) it focuses the first item.

CALIBRATION · NOW Lens 2 is back in spec Wavefront error 0.04 λ RMS at 633 nm.

Panel

A rounded container for cards, sheets and notifications. Works on <dialog> too.

Toast

Slides in from the top and leaves after four seconds. Swipe it up to dismiss. Screen readers announce it.

import { toast } from './liquid-glass.min.js';

toast('Lens 2 is back in spec');
toast(node, { duration: 0 }); // stays until swiped away

Alert

A native <dialog>, opened with commandfor and no script. The buttons close it, and returnValue says which one was pressed.

Any element

data-glass on anything with a border radius. Tune it per element with --lg-* properties, or call glass(el, opts).

Playground

Every option, live

Geometry changes (size, radius, bezel, thickness, profile, index, light, zoom) rebuild the maps. Refraction, blur, saturation and specular only change filter attributes, so they are cheap to animate.

Glass

profile

Generated map · R = x shift, G = y shift, B = rim light

Reference

API

Load the module once with <script type="module" src="liquid-glass.js"></script>. It adds its styles in a cascade layer, so any unlayered CSS of yours wins.

Option	Default	Effect
--lg-profile	squircle	Bezel shape: `squircle`, `circle`, `lip` or `concave`
--lg-bezel	auto	Width of the curved edge in px (auto = 0.8 × radius)
--lg-thickness	auto	Glass height in px (auto = 1.2 × bezel). More = stronger bend
--lg-ior	1.5	Refractive index
--lg-refraction	1	Multiplier on the physical displacement
--lg-blur	1	Frost, as a Gaussian blur in px
--lg-saturation	5	Colour boost under the rim highlight
--lg-specular	0.7	Rim highlight opacity
--lg-light	225	Light angle in degrees (0 = from the right, 90 = from below)
--lg-zoom	1	Magnification of the flat centre
--lg-antialias	1	Smoothing of zoomed pixels, scaled to zoom and screen density. `0` turns it off, `2` doubles it

Piece	Usage
glass(el, opts)	Applies glass to any element and returns `{ filter, update(opts), destroy() }`. Also available as `el.glass`.
[data-glass]	Applied automatically, including to elements added later. Removing the attribute or the element cleans up. The glass is drawn on the element's `::before`, so keep that pseudo-element free and avoid `opacity` below 1 on the element.
<lg-switch>	Attributes pass through to the inner checkbox (`name`, `checked`, `disabled`…). Property `.checked`.
<lg-slider>	`min`, `max`, `step`, `value`, `name` pass through. Property `.value`.
<lg-stepper>	`min`, `max`, `step`, `value`, `name` pass through to a hidden `<input type="number">`. Hold to repeat. Property `.value`.
<lg-dots>	`for="id"` follows a scroll-snap container's pages, or `count="n"`. Tap, drag to scrub, arrow keys. Property `.value`, fires `change`.
<lg-segmented>	Children are the segments. `.value` = selected index, fires `change`. Add `.lg-tabbar` for icon tabs.
.lg-btn	Variants `.lg-round` and `.lg-tinted`
.lg-toolbar	Icon buttons sharing one capsule; add `role="toolbar"` and an `aria-label`. `<hr>` divides groups; `aria-pressed` buttons toggle.
toast(content, opts)	Banner from the top. `content` is a string or node; `{ duration }` in ms (default 4000, `0` keeps it up). Swipe up to dismiss.
[data-contextmenu]	Right-click or long-press inside opens the `.lg-menu` with that id at the pointer.
.lg-alert	On a `<dialog>`. Open it with `showModal()` or `command="show-modal"`; buttons in a `<form method="dialog">` close it with their `value`.
.lg-tip	On a `popover="hint"` element, opened by `interestfor="id"` on its trigger. Sits above it, flips below when there is no room.
.lg-field · .lg-panel · .lg-menu	Search field, container, popover menu
--lg-accent · --lg-tint	Theme colour and glass fill. Normal inherited custom properties.

One ES module, no dependencies, 9.1 KB gzipped.

Glass that bends what sits behind it.