Glass

Dark popups, light panels

Popups such as menus, tooltips and toasts are dark glass in both themes, so they stand out from the page. Panels such as dialogs, cards and the header are light glass that follows your theme. Small parts like checkboxes and switches stay solid.

Three thicknesses

Thin glass is for chips and fields. Regular glass is for cards and floating panels. Thick glass is for anything that holds a form, like a dialog. The thicker it is, the more it hides what is behind it.

Use it

You get glass without doing anything, because the components already use it. For a glass button or badge over an image, pick the glass variant.

<Button variant="glass">Preview</Button>
<Badge variant="glass">4K</Badge>

For a panel of your own, copy one of these.

// popup (dark in both themes)
<div className="bg-glass-background-primary text-glass-text-primary shadow-glass backdrop-glass" />

// panel
<div className="bg-glass-background-surface shadow-glass-surface backdrop-glass" />

// thick panel, for forms and dialogs
<div className="bg-glass-background-surface-thick shadow-glass-surface backdrop-glass-thick" />

Backdrops

The same card over different backgrounds. Glass shows best over colour and photos. On a plain page it reads as a soft card.

Do and don't

• Put buttons and fields on a glass panel.
• Don't put glass panels inside glass panels. It gets muddy fast. Group things with spacing, a divider or a plain fill instead.
• Give glass something to sit on, like a photo, a gradient or a coloured section.

Over dark photos

Glass buttons and badges follow the theme, so in light mode they are light. Over a dark photo that looks out of place. Add dark to the wrapper and they switch to dark glass with white text, whatever the page theme is.

<div className="dark bg-cover" style={{ backgroundImage }}>
  <Button variant="glass">Preview</Button>
</div>

Make it yours

Every glass value is a CSS variable in your global stylesheet. Change one and all components follow. Raise a percentage for more solid glass, or lower a blur for a clearer one.

Accessibility

When someone has Reduce transparency turned on in their system settings, glass becomes solid on its own. Main text stays readable on every kind of glass. The one case to watch is long grey secondary text on a light panel over a very dark photo. Add dark to the wrapper there.

Example: RAG chat

A chat screen built from three glass panels. The same markup, once over a photo and once over a gradient.