Get started
All interface styles
Surface & material
Free

Glassmorphism

Translucent panels that blur whatever sits behind them, so depth comes from the layer stack rather than from heavy borders.

Also called: frosted glass, glass UI, acrylic, spatial, blur panel

Your Design Kit keeps

Colors, typefaces, the spacing scale, motifs, and brand voice.

Glassmorphism changes

Surface material, borders, shape, depth, component layout, states, and motion.

Glassmorphism specimen

Base components
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago
Glassmorphism applied
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago

Look for: Watch the panel edge and the field behind it: the highlight along the top and the softened backdrop are doing the depth work that a border would do elsewhere. The selected chip keeps a solid edge so it does not rely on opacity alone.

Both panels use the same sample Design Kit and account screen. Only the interface style changes on the right.

Choose what to restyle

Select a scope to create a prompt for your coding agent. Start with one component family or apply the style across the interface.

Choose what the style should change
Apply Glassmorphism to cards, panels, sheets, and modals only. Keep my Design Kit's colors, typefaces, and motifs. Leave navigation, forms, actions, and page structure unchanged. Show me one representative card first, then explain the accessibility trade-offs before changing the rest.
Paste this into your coding agent, then add any product-specific constraints.

What you see

The perceptual fingerprint, in the order you notice it.

  • Panels you can partly see through, with the background softened behind them
  • A thin light edge along the top of each panel, as if it caught a highlight
  • Large soft radii on panels, tighter radii on the controls inside them
  • A coloured field or image behind the glass that gives the blur something to do
  • Shadows that read as distance from the backdrop, not as a drawn outline

Best for

  • Product and launch pages where an image or gradient should stay visible under the content
  • Overlays, sheets and command palettes that must feel above the page
  • Interfaces with few, large panels rather than dense tabular screens

Avoid when

  • Text-dense reading or data screens, where a moving backdrop under body copy costs legibility
  • The backdrop is uncontrolled — user photos or arbitrary content behind glass break contrast
  • You need the same rendering on low-end hardware; backdrop blur is the first thing to cost frames

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • Contrast is measured against the actual composite, not the panel colour: raise panel opacity until body text clears 4.5:1 over the busiest patch of backdrop.
  • The panel edge must be perceivable without the blur — a 1px border at 3:1 against the backdrop, so the boundary survives `prefers-reduced-transparency` and unsupported browsers.
  • Selection cannot be carried by 'slightly more opaque'. Pair it with a border weight or an inset marker that stays visible at 200% zoom.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

Frosted translucent panels (backdrop-blur + translucent fill + light hairline) floating over saturated/aurora light fields. visionOS / Big Sur spatial UI.

Implementation bundle

What an agent needs in order to actually build Glassmorphism on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Surface rules

The declarations that make the render grammar, stated as CSS.

  • Panel surface: `background: hsl(var(--card) / 0.55)` with `backdrop-filter: blur(16px) saturate(140%)` and the `-webkit-backdrop-filter` twin for Safari.
  • Panel edge: `border: 1px solid hsl(var(--foreground) / 0.10)` plus `box-shadow: inset 0 1px 0 hsl(var(--background) / 0.55)` for the top highlight.
  • Radii: 16px–20px on panels, 10px on controls inside them; never equal, the nesting is what reads as glass thickness.
  • One ambient shadow only: `0 12px 32px -12px hsl(var(--foreground) / 0.28)`. Stacked shadows turn glass into plastic.
  • Backdrop layer: a radial or conic field mixing `--primary` and `--accent` at 12–20% alpha behind the panels, so the blur has structure to soften.

Component rules

Nav, action, input, selection, card and status, one rule each.

  • Nav sits on its own glass strip with the same blur but half the panel opacity, so it reads as nearer to the viewer than the content.
  • Primary action is SOLID `--primary`, not glass: the one thing you must not have to look through.
  • Inputs use `background: hsl(var(--background) / 0.45)` with an inset top shadow, so the field reads as pressed into the panel.
  • Selected chip: solid `hsl(var(--primary) / 0.18)` fill plus a 1px `--primary` border AND a leading check glyph — three signals, none of them blur.
  • Cards inside a panel drop the blur entirely and use a flat `hsl(var(--card) / 0.72)`; nested backdrop filters compound into mud.
  • Status pills carry a text label as well as colour ('Live', not a green dot).

Responsive rules

What has to change as the viewport narrows for the style to survive.

  • Below 640px reduce blur to 10px and raise panel opacity to 0.72 — small type over a busy backdrop is where glass fails first.
  • Panels go full-bleed edge-to-edge with 16px gutters; the visible backdrop margin is what sells the material, so keep at least 12px of it above and below the stack.
  • The nav strip collapses to a single row of icon-plus-label buttons and keeps its own blur layer rather than merging into the page background.

Fallbacks

The degraded paths: unsupported effects, weak shadows, reduced motion.

  • `@supports not (backdrop-filter: blur(1px))`: panels become fully opaque `hsl(var(--card))` with a `--border` edge. The layout does not change — only the material does.
  • `@media (prefers-reduced-transparency: reduce)`: same opaque path, applied unconditionally.
  • When the backdrop is user-supplied media, composite a `hsl(var(--card) / 0.65)` scrim under the blur so contrast does not depend on the image.

QA checks

What to verify before shipping an interface in this style.

  • Body text over the panel clears 4.5:1 against the LIGHTEST and DARKEST patch of the backdrop, not the average.
  • Turn `backdrop-filter` off in devtools: every panel boundary is still visible and no text loses contrast.
  • Tab through the specimen — focus rings are visible on glass, which usually means a two-tone ring (light halo plus dark core).
  • At 200% zoom no panel clips its content and the backdrop field still shows between panels.

Agent tags

The vocabulary a coding agent can match this style on.

  • backdrop-filter
  • translucent-surface
  • layered-depth
  • soft-radius
  • overlay-ui