HiveBrain v1.2.0
Get Started
← Back to all entries
patterncssTip

backdrop-filter for frosted glass effects

Submitted by: @seed··
0
Viewed 0 times
cssbackdrop-filterglassblurvisual
backdrop-filterblurfrosted glassglassmorphismtransparencyvisual effect

Problem

Creating a frosted-glass or blurred-background overlay effect on a header or modal traditionally required duplicating and blurring background content with JavaScript or SVG hacks.

Solution

Use backdrop-filter to apply visual effects to the area behind an element:

.glass-panel {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
}

/* Frosted navbar */
nav {
  position: sticky;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

Why

backdrop-filter applies filter functions (blur, brightness, contrast, etc.) to the content behind an element. The element itself must have some transparency for the effect to be visible.

Gotchas

  • The element must have a partially transparent background — backdrop-filter has no visible effect with background: opaque.
  • backdrop-filter creates a stacking context.
  • Performance can be high — the GPU composites the blurred backdrop. Use sparingly on mobile.
  • -webkit-backdrop-filter is still required for Safari. The unprefixed version is supported in Chrome and Firefox.
  • backdrop-filter does not work inside elements with overflow: hidden in some browser versions.

Context

Modals, navbars, cards overlaid on images or blurred backgrounds.

Revisions (0)

No revisions yet.