Glass

Hero example

When to use

Reach for Glass when the surface needs to feel translucent and refractive — typically sitting over a BloomBackdrop or a saturated marketing hero. Glass is the canonical Tahoe-glass material: backdrop blur, saturation, a top specular highlight, a bottom edge shadow, and a soft radial light overlay (::before pseudo-element). The refraction needs something saturated behind it — placing Glass over a flat page background produces a subtle but visually flat surface.

Don't reach for Glass when the surface is over a plain background — use Card for opaque elevation. Don't use Glass for overlays — that's Sheet, which composes Glass internally. Glass is the material; Sheet is the modal pattern that uses it.

Anatomy

A single <div class="glass"> (or .glass-dark when tone="dark") with no internal structure. The surface composes four layers via CSS:

1. Backdrop filter. backdrop-filter: blur(20px) saturate(180%). The blur and saturation depend on backdrop-filter support; in unsupported browsers the surface degrades to a flat tint.
2. Top specular highlight. A 1px linear gradient at the top edge, simulating reflected light.
3. Bottom edge shadow. A subtle inset shadow at the bottom edge, simulating refraction depth.
4. Soft radial light overlay. A ::before pseudo-element with a radial gradient, simulating ambient light bleeding through the surface.

The radius is fixed at --radius-lg. Padding defaults to 24 (configurable via the padding prop).

Props

tone controls the light vs dark recipe. "light" produces a glass-over-light surface with a brighter highlight; "dark" is glass-over-dark with a saturated tint floor.

States

Glass has no states — it's a static material. If you need a hover state (e.g. a clickable glass card), wrap Glass in a <button> or <a> and apply :hover styles via class composition.

Density

In compact, the default padding drops from 24 to 16. The blur radius, saturation, and highlight intensity stay constant — they're visual identity.

Themes

tone is independent of theme — you can render a tone="light" glass inside a dark theme (typical for marketing hero overlays). In forced-colors, the backdrop-filter has no effect; the glass collapses to a flat Canvas with ButtonBorder.

Tokens consumed

Surface reads --surface-glass (light) or --surface-glass-dark (dark). Top highlight reads --surface-glass-highlight. Bottom shadow reads --surface-glass-shadow. Radius reads --radius-lg.

Accessibility

• Keyboard interactions. None — passive container.
• ARIA roles and properties. Generic container. Children carry their own contracts.
• Focus order. No internal focus.
• Screen-reader expectations. Children announce in DOM order.
• Reduced motion. No motion to suppress.
• Forced colors. backdrop-filter is unsupported in forced-colors. Glass collapses to Canvas with ButtonBorder. The ::before radial overlay disappears.
• WIG rules. No specific implications — Glass is a passive material. Verify contrast of children against the underlying backdrop, not just the glass surface (the surface tints, it doesn't guarantee).

Do / Don't

Recipes

This component appears in:

• Docs corpus recipe — the chat assistant card over the bloom backdrop.
• Board recipe — the dashboard hero card.
• Every Sheet mount — Sheet composes Glass internally.

Code example

import { Glass, BloomBackdrop } from "@matter/components";

export function HeroOverlay({ children }: { children: React.ReactNode }) {
  return (
    <div style={{ position: "relative" }}>
      <BloomBackdrop variant="peach" />
      <Glass tone="light" padding={48}>
        {children}
      </Glass>
    </div>
  );
}

Source