Frosted Glass

A translucent panel effect using backdrop-filter blur. Ideal for overlays, navigation bars, and floating cards.

Live Demo

Frosted Glass Panel

Content is readable while the background shows through with a soft blur.

CSS Implementation

css

.frosted-glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
}

Light Surface Variant

For use on light backgrounds, increase the white opacity and reduce blur slightly.

Light frosted panel

css

.frosted-glass-light {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
}

Configurable Tokens

Prop	Type	Default	Description	Required
background	`color`	rgba(255,255,255,0.15)	Panel background with alpha transparency	No
blur	`px`	16px	Blur radius for the backdrop-filter	No
border	`color`	rgba(255,255,255,0.25)	Semi-transparent border for edge definition	No
border-radius	`px`	16px	Corner rounding (min 8px per system rules)	No

Usage Guidelines

Always include the -webkit-backdrop-filter prefix for Safari support.
The effect requires a visually rich background behind the panel to be noticeable.
Pair with semi-transparent borders for edge definition.
Use on navigation bars, modal overlays, and floating toolbars.
Avoid excessive blur values (>24px) -- they reduce performance on lower-end devices.