Frosted Glass Gallery

A material layer of translucent surfaces, backdrop blur, and specular edge rings (no browser-specific filters; Chromium and Firefox render the same geometry; dynamic fluidity is provided by the optional glass-fluid.js runtime — pointer specular highlight + press tightening; see "Dynamic fluidity" on this page).

Open dialogShow message

PrimaryDefaultTranslucency + blur + edge ring are consistent across browsers; control geometry does not change per engine

Card surface

Translucent bg + backdrop-filter blur + specular ring. Richer backdrops make the material pop.

Tag

Text legibility

Secondary text uses the token safe tier and stays legible over busy backdrops.

Usage

<link rel="stylesheet" href="https://unpkg.com/@oas-ui/theme@2/glass.css" />
<html data-glass>

• data-glass stacks on top of data-theme / data-skin—freely composable;
• the material needs backdrop contrast: it shines over colorful gradients/photos and recedes on flat same-hue backgrounds (text stays legible);
• uncontrolled busy backdrops (photos/video) do not guarantee text contrast; raise the surface alpha or disable the glass layer locally when needed;
• the dark tier is tuned separately: --oas-glass-ring / -sheen / -press stay lower than light but are no longer imperceptible (edge highlight and translucency remain visible), with slightly stronger blur; no usage change between themes;
• local opt-out: override --oas-glass-blur: none; --oas-glass-ring: transparent on any container;
• disabled under the high-contrast theme (solid accessibility tier wins);
• under prefers-reduced-transparency: reduce, falls back to solid surfaces (no blur, edge ring, or dynamic highlight; radius and shadow remain).

Dynamic fluidity (pointer specular highlight, optional runtime)

The highlight needs a small runtime (glass-fluid.js): a single document pointermove listener resolves the surface via composedPath and writes the pointer position as element-local CSS variables; the runtime injects the highlight stylesheet into the matching components' shadow roots (adoptedStyleSheets), so no glass rule or marker exists in component sources (only --oas-glass-* variable consumption lines).

<link rel="stylesheet" href="https://unpkg.com/@oas-ui/theme@2/glass.css" />
<script type="module">
  import 'https://unpkg.com/@oas-ui/theme@2/glass-fluid.js'
</script>
<html data-glass>

• Dynamic highlight scope (9 controls/nav/notification components: button / switch / slider thumb / app-bar / bottom-navigation / message / toast / snackbar / notification); content panels are excluded;
• Guards: zero listeners without data-glass; disabled under prefers-reduced-motion: reduce; not enabled for coarse pointers (touch); disabled under high-contrast; starts/stops automatically as the markers or media queries change;
• Tunable variables (CSS custom properties pierce shadow DOM): --oas-glass-px / --oas-glass-py (pointer-local coordinates written by the runtime — do not set manually), --oas-glass-sheen / --oas-glass-sheen-size / --oas-glass-sheen-press (sheen color, radius, pressed color; one step each for light and dark, defined in glass.css);
• The highlight layer sits above the surface background and below the label text (isolation: isolate + negative z-index), so the specular reflection never washes out the label;
• Scope and press: the hover sheen applies to all glass surfaces and buttons (including solid semantic/custom-color buttons — primary/success/warning/danger/has-color); for solid buttons the pressed state uses an edge inset ring (box-shadow inset, no fill lightening) — a white fill wash would push white-text contrast below the floor, while an edge ring leaves the label untouched (matching Apple's rim specular / Fluent's inset pressed cue); glass surfaces keep the stronger pressed sheen (a true enhancement);
• Contrast gate: glass surfaces are gated at ≥60 on hover (composited over the theme page background — light #fff / dark #18181b) and ≥45 pressed; solid buttons at ≥45 on hover (transient large-text tier) with their resting/pressed baseline (no fill lightening) ≥60. For translucent surfaces over extreme host backdrops, ensuring text contrast is the host's responsibility; the switch's in-track label changes background with its checked state and is not part of this gate.
• Boundary: with a still pointer, scrolling won't move the highlight until the pointer moves again; the slider thumb highlight is hidden in overlay states (dragging / focused / show-tooltip / custom thumb data-custom-thumb), and the press ring is only visible while pressed without moving.