Crafting Translucent Surfaces with CSS backdrop-filter

Glassmorphism and translucent UI overlays bring depth and context to modern interfaces by letting blurred background content peek through floating navigation bars, modal dialogs, and toast alerts.

Before the standardized backdrop-filter property, achieving this required duplicate background elements, complex SVG filter hacks, or canvas rendering. The CSS backdrop-filter property applies graphical effects like blurring or color shifting directly to the area behind an element.

Example #

A sticky navigation header that blurs underlying page content as the user scrolls:

<header class="glass-header">
  <div class="logo">Clean Markup</div>
  <nav aria-label="Main navigation">
    <a href="/posts/">Archive</a>
    <a href="/about/">About</a>
  </nav>
</header>

Implementation #

We declare a semi-transparent background color paired with backdrop-filter: blur(), and provide a solid fallback inside a @supports query for older browsers:

.glass-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solid fallback for browsers without backdrop-filter support */
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--lightgray);
  padding: 16px 24px;
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .glass-header {
    background-color: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

Main Point: Use backdrop-filter with progressive @supports fallbacks and adequate background contrast ratios to deliver modern translucent surfaces without sacrificing readability.

Credits #

Photo by Aaron Burden on Unsplash

← Home