Live Docs

Navigation

Effects & Media /

new

Glass

Frosted-glass surface utilities (backdrop-filter) for overlays, hero cards, and floating panels. CSS-only — compose onto any element.

import "@naraya-ai/ui/glass";

Overview

Glass is a CSS utility, not a component — add the class to any element. It pairs backdrop-filter blur with a tinted fill and a hairline border that flips correctly in dark mode.

Examples

Variants

Full frost, subtle (near-transparent), and raised (with elevation).

Glass

Full frost

Subtle

Mostly blur

Raised

+ shadow

import "@naraya-ai/ui/glass";
import { Shards } from "@naraya-ai/ui";

<div className="naraya-glass-root">           {/* backdrop root */}
  <Shards variant="b" />                        {/* sharp brand facets to frost */}
  <div className="naraya-glass naraya-glass--sheen">Glass</div>
  <div className="naraya-glass naraya-glass--subtle">Subtle</div>
  <div className="naraya-glass naraya-glass--raised">Raised</div>
</div>

⚠️ Frost vs. animation

Never animate or transform a glass element — or any ancestor of one.

A transform, opacity<1, filter, will-change, or an entrance animation on an ancestor promotes it to a “backdrop root”, and the frost silently renders nothing (even though it still shows in devtools). Animate a glass-free sibling, or the content inside the glass. Wrap the glass + its decorative background in .naraya-glass-root to establish the backdrop root on purpose.

Classes

PropTypeDefaultDescription
.naraya-glassclass—Frosted surface: tinted fill + blur + hairline border.
.naraya-glass--subtlemodifier—Near-transparent (mostly blur) for busy backdrops.
.naraya-glass--raisedmodifier—Adds a soft elevation shadow.
.naraya-glass--sheenmodifier—Top-edge light catch for a frosted highlight.
.naraya-glass-roothelper—Backdrop-root wrapper (relative + isolate + overflow:hidden).

Tokens Used

--bg-glass / --bg-glass-alpha

Tinted fill + opacity

--bg-glass-subtle-alpha

Subtle variant opacity

--glass-blur / --glass-subtle-blur

Blur radius

--glass-saturate

Backdrop saturation boost

--glass-border / --glass-border-alpha

Hairline border (theme-aware)

--shadow-lg

Raised elevation