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

Glassmorphism specimen

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.

Every style in this collection renders the same markup — one navigation row, one headline and action, one labelled input, a selected and an unselected control, a card with a status and a data row, and a secondary action. Colour and type come from the active design kit; the style decides the rendering.

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