Glass

Frosted glass surfaces communicate spatial depth — a panel floats above content, a modal floats above the page. Every glass level pairs blur, saturation, opacity, and a hairline border.

Variants

Five glass variants ordered by elevation. Each preview renders the surface over the brand gradient so the frosting effect is always visible.

Overlayblur(20px) · saturate(180%) · 92% bg
Overlay

The strongest glass level. Used for command palettes, sheets, and full-screen overlays.

Blur
20px
Saturate
180%
BG opacity
92%
Used in
Command palette, modals, drawers
Chromeblur(16px) · saturate(180%) · 85% bg
Chrome

High-fidelity frosting for persistent chrome. Sits between content and the edge of the viewport.

Blur
16px
Saturate
180%
BG opacity
85%
Used in
Header, navigation bars
Panelblur(10px) · saturate(160%) · 100% bg
Panel

Lighter blur for persistent sidebars and panels. Keeps content behind subtly readable.

Blur
10px
Saturate
160%
BG opacity
100%
Used in
Sidebar, floating panels
Ghostblur(12px) · saturate(150%) · 72% bg
Ghost

Low-opacity glass for inline controls. The content behind remains clearly legible.

Blur
12px
Saturate
150%
BG opacity
72%
Used in
Ghost buttons, secondary controls
Accentblur(12px) · saturate(160%) · 90% bg
Accent

Brand-coloured glass for primary actions. The accent hue tints the frosting.

Blur
12px
Saturate
160%
BG opacity
90%
Used in
Primary buttons, active badges

Properties

backdrop-filter: blur()
Values in use
  • 10pxPanel
  • 12pxGhost / Accent
  • 16pxChrome
  • 20pxOverlay
Notes

Controls how much the content beneath is blurred. Higher values create denser frosting at the cost of GPU compositing.

backdrop-filter: saturate()
Values in use
  • 150%Ghost
  • 160%Panel / Accent
  • 180%Chrome / Overlay
Notes

Boosts color saturation of the blurred content below. Prevents glass from looking washed-out — always paired with blur.

background-color opacity
Values in use
  • 72%Ghost
  • 85%Chrome
  • 90%Accent
  • 92%Overlay
  • 100%Panel
Notes

The fill opacity of the surface token. Lower values let more background bleed through the frosting.

border
Values in use
  • 1px solid rgb(var(--border-subtle))Low-contrast contexts
  • 1px solid rgb(var(--border))Standard glass edge
  • 1px solid rgb(var(--accent) / 0.45)Accent glass
Notes

A hairline border defines the glass edge against blurred content. Without it the surface dissolves into the background.

Rules

Glass needs real depth

Frosted glass only communicates spatial meaning when there is real content behind it. A glass card over a flat colour is a lie — use a solid surface instead.

Layer from the inside out

Content → Surface → Panel → Chrome → Overlay. Each layer uses a stronger blur than the one beneath it. Never apply a stronger glass variant lower in the stack.

GPU cost is real

backdrop-filter forces the browser to composite every layer beneath it. Limit glass surfaces to persistent chrome and infrequent overlays. Never animate blur values.

Always include the border

Without a hairline border the glass edge dissolves into the background. The border is not decoration — it is the surface definition.

Saturate alongside blur

blur() alone drains colour from the background. saturate() restores it. The two are always paired — removing one makes the glass look washed out or unnaturally vivid.

Provide a solid fallback

backdrop-filter is not universally supported. Always pair it with a solid background-color so the surface remains legible when the effect drops out.

Specular overlays

Liquid Glass adds four specular layers on top of the base frosted surface. Each one mimics a different physical light-interaction — an edge highlight, a brand tint, a pill gloss, and a colour strip sheen. These are the web equivalents of Warren's Swift surface modifiers.

sfSpecularTopEdgeSwift: sfSpecularTopEdge

1 px hairline highlight on the top edge of any glass surface. Communicates that light is hitting the surface from above. Applied via box-shadow so it doesn't require a pseudo-element.

Webbox-shadow: inset 0 1px 0 rgba(255,255,255,0.10)
Top edge specular
sfBrandLitSurfaceSwift: sfBrandLitSurface

Subtle accent tint applied to glass surfaces that are 'lit' by the brand colour — e.g. the active state of a navigation item, a selected card, or a goal-met streak card. Pairs with a matching accent border at 0.25 opacity.

Webbackground: rgb(var(--accent) / 0.06)
Brand-lit surface
sfPillSpecularSwift: sfPillSpecular

Stronger top-edge specular for pill-shaped controls — badges, tags, segmented buttons. The outer ring at 2px provides a subtle selection halo. Both shadows collapse to a single box-shadow declaration.

Webbox-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 0 0 2px rgba(0,0,0,0.12)
Pill specular
sfColorStripSheenSwift: sfColorStripSheen

A translucent gradient strip that fades from the surface's accent colour to transparent, running left-to-right across the top of a card. Used in Gantt bars, Kanban column headers, and progress indicators.

Webbackground: linear-gradient(to right, var(--color), transparent)
Gantt bar

Reduced transparency

When the user has enabled "Reduce Transparency" in their OS accessibility settings, glass effects must fall back to solid surfaces. Both CSS and SwiftUI expose this preference — always handle it.

CSS — prefers-reduced-transparency
.glass-surface {
  backdrop-filter: blur(20px) saturate(160%);
  background: rgb(var(--surface) / 0.85);
}

@media (prefers-reduced-transparency) {
  .glass-surface {
    backdrop-filter: none;
    background: rgb(var(--surface));
  }
}
SwiftUI — UIAccessibility.isReduceTransparencyEnabled
// Warren uses .ultraThinMaterial with a conditional override
var backgroundMaterial: some ShapeStyle {
    UIAccessibility.isReduceTransparencyEnabled
        ? AnyShapeStyle(Color.sfSurface)
        : AnyShapeStyle(.ultraThinMaterial)
}

// In a view:
.background(backgroundMaterial)

Testing tip — Enable "Increase Contrast" + "Reduce Transparency" in macOS System Settings → Accessibility → Display, or toggle prefers-reduced-transparency: reduce in Chrome DevTools → Rendering → Emulate CSS media feature.