Liquid glass

A translucent surface treatment for floating panels in C3 products. Glass surfaces preserve spatial context — operators see the map, feed, or canvas through the panel rather than having it occluded. Available in both C3 light and C3 dark modes.

Live demo

Chrome surfacesurface-glass-chrome

Panel surface

Heavier glass for floating overlays — sheets, popovers, notification centres.

surface-glass-panel

When to use

• Floating panels that sit over a map, feed, or visual canvas
• Side panels (notifications, workspace, app drawers) where spatial context matters
• Top chrome (top bar, status ticker) over rich visual backgrounds
• Tooltips and popovers in C3 templates where the operator should keep seeing the data behind

When NOT to use

Alert dialogs — emergency UI needs maximum legibility, stay solid
Critical-error toasts — danger states stay solid
Confirmation modals for destructive actions — stay solid
Enterprise products — glass conflicts with the "calm, spacious, professional" design principle

Two tiers

PRIZM glass comes in two intensities. Both share the same recipe; they differ in blur, opacity, and shadow strength so they preserve visual hierarchy when stacked.

surface-glass-chrome

Application frame: top bar, status ticker, icon rail, persistent navigation

Blur: 8px
Tint opacity: 6%
Border: hairline
Shadow: subtle top highlight

surface-glass-panel

Floating overlays: notification centre, workspace, slide panels, popovers, tooltips

Blur: 12px
Tint opacity: 10%
Border: hairline
Shadow: stronger highlight + drop

Anatomy

Each glass surface composes five effects. The tint flips with the mode — darker on light, lighter on dark — so the surface always reads as elevated, never as invisible.

1
Backdrop blur — Diffuses what's behind the surface. 8px (chrome) or 12px (panel) — tuned to keep underlying canvas activity readable.
2
Backdrop saturate — Boosts color saturation of the backdrop (180%) — gives the wet, refractive feel.
3
Surface tint — Very subtle (6-10% opacity). Darker on light mode, lighter on dark. Contrasts the backdrop.
4
Inner hairline border — 1px inset border that defines the edge of glass. Does most of the surface-definition work.
5
Soft noise overlay — A tiled SVG noise pattern at 4-5% opacity breaks up large flat translucent areas.

How to apply

Two paths. Most projects use the variant prop for ergonomics; the utility class is the escape hatch when you need glass on a custom element.

Variant prop on supporting components

Six components ship a variant="glass" prop: Sheet, Popover, Tooltip, HoverCard, Menu, ContextMenu. Default remains "solid".

tsx

<Sheet>
  <SheetTrigger render={<Button>Open</Button>} />
  <SheetContent side="right" variant="glass">
    <SheetHeader>
      <SheetTitle>Notifications</SheetTitle>
    </SheetHeader>
    <SheetBody>{/* … */}</SheetBody>
  </SheetContent>
</Sheet>

Utility class on any surface

For custom chrome, use surface-glass-chrome or surface-glass-panel.

tsx

<header className="surface-glass-chrome border-b border-border px-3">
  {/* top bar content */}
</header>

<aside className="surface-glass-panel border-r border-border">
  {/* slide panel content */}
</aside>

Tokens

Glass values are wired through CSS custom properties so they can be tuned centrally. The tokens live in styles/tokens/c3-light.css and styles/tokens/c3-dark.css.

Token	Purpose
--prizm-glass-chrome-bg	Surface tint for chrome-tier glass (top bar, ticker, rail)
--prizm-glass-chrome-border	Inner hairline border for chrome-tier glass
--prizm-glass-chrome-blur	Backdrop blur amount for chrome tier (8px)
--prizm-glass-chrome-saturate	Backdrop saturation boost (180%)
--prizm-glass-chrome-shadow	Inner highlight/shadow for chrome tier
--prizm-glass-panel-bg	Surface tint for panel-tier glass (sheets, popovers, side panels)
--prizm-glass-panel-border	Inner hairline border for panel-tier glass
--prizm-glass-panel-blur	Backdrop blur amount for panel tier (12px)
--prizm-glass-panel-saturate	Backdrop saturation boost (180%)
--prizm-glass-panel-shadow	Inner highlight + drop shadow for panel tier
--prizm-glass-noise-opacity	Opacity of the SVG noise overlay (4-5%)

Compatibility & performance

Browser support — uses backdrop-filter, supported in all evergreen browsers and Chromium 76+. Older or stripped browsers fall back to solid surfaces via @supports.
Air-gapped browsers — works the same. No external assets; the noise overlay is vendored at /public/noise.svg.
Performance budget — backdrop-filter is GPU work. Aim for ≤6 concurrent glass surfaces in the visible viewport. Small chrome elements (top bar, ticker, rail) are cheap; large expanded panels are heavier. Profile on the target hardware if you're stacking many.
Accessibility — glass applies to the surface background only; text stays at full opacity. WCAG AAA contrast remains the target. Test against worst-case canvas backdrops (e.g. bright sun glare on a map).

Principle

Layered transparency for spatial context

When a panel floats above content the operator needs to keep oriented to (a map, a feed, a chart), prefer a glass treatment over a solid surface. Translucency preserves the spatial relationship between the foreground panel and the background data; the operator never loses the canvas they're working from. Reserved for floating surfaces — never for legibility-critical UI.

See all design principles →

See it in product

The C3 App Shell template ships glass mode as a toggle. Open the preview to experience glass on every chrome and panel surface, then switch back to solid to compare.

Open App Shell preview App Shell docs