Theming
Glass is a handful of CSS custom properties. Set them on the root to change every surface, or on any element to change the glass inside it.
Material tokens
| Property | Default | Effect |
|---|---|---|
--liquid-blur | 20px | Backdrop blur behind glass. |
--liquid-tint | 0.22 | Opacity of the glass fill. |
--liquid-fill | 255 255 255 | Fill color as RGB channels. |
--liquid-ink | #172323 | Text and icons on glass. |
--liquid-accent | #155dfc | Prominent buttons and labels under a lens. |
--liquid-lens-ink | the accent | Labels under a lens only. |
--liquid-viscosity | 0.5 | Spring feel, from 0 (firm, bouncy) to 1 (slow, soft). |
--liquid-morph-duration | 520ms | How long a menu takes to form. |
Menus and toasts render in a portal at the end of the page, so give them their values on the root element.
:root {
--liquid-blur: 28px;
--liquid-tint: 0.3;
--liquid-viscosity: 0.3;
}Try them
These controls set the same properties on this page’s root.
Accent and lens
--liquid-accent colors prominent buttons and the labels under a lens. To keep lens labels neutral while buttons stay tinted, point the lens at the ink:
:root {
--liquid-accent: #ff375f;
}
.filters {
--liquid-lens-ink: var(--liquid-ink);
}Dark material
Glass inside an element with the dark class, the shadcn convention, or with data-liquid-theme="dark" turns dark: a charcoal fill, white ink, and a brighter lens so labels stay legible.
<html className="dark">
…
</html>
<section data-liquid-theme="dark">
<Toolbar aria-label="Playback">…</Toolbar>
</section>Opaque glass
When someone asks for less transparency or more contrast in their system settings, glass becomes an opaque fill with no blur. To do the same for part of a page, set data-reduced-transparency="true" on an ancestor.