The liquid glass family is eight pieces on one shared surface. This page says when to use it and how to keep it fast and readable.
What it is
A glass surface is a blurred and saturated body, a conic highlight rim that turns toward the pointer, a chromatic edge and a soft sheen. It is plain CSS (backdrop-filter), so it costs no WebGL and works on any background: a photo, a video, a 3D scene or a gradient.
The pieces
| Piece | Use it for |
|---|---|
| Glass Panel | Cards and sheets over imagery |
| Glass Nav | A floating site header |
| Glass Dock | An app-like launcher with magnifying icons |
| Glass Tabs | Billing or range switches |
| Glass Player | Now-playing cards |
| Glass Controls | Settings, smart-home and device demos |
| Glass Notifications | Lock-screen style notices |
| Glass Dialog | Confirmations over a busy page |
Making it readable
- Set
tone="dark"over bright art andtone="light"over dark art.autois white-tinted. - Keep blur between 14 and 24 px; less looks like a plain overlay, more turns the page to mush.
- Never put long reading text on glass. It is for labels, controls and short copy.
- Give the glass something to frost: a flat colour behind it makes it look like a grey box.
Budget
Each surface is one backdrop filter. Keep a view to about six, and set still on pieces that repeat in a list so they skip the pointer sheen. Without backdrop-filter support the surface falls back to a solid dark panel.
Accessibility
Glass pieces keep native buttons, links and range inputs, so keyboard and screen readers work. Check text contrast against the brightest part of the art, not the average.