CSSbackdrop-filterGlassmorphismFilters

CSS backdrop-filter: Blur, Brightness & Saturation Effects

backdrop-filter applies filter effects to the area *behind* an element. Learn to create frosted glass, dark overlays, color-shifting panels, and iOS-style blurred UI components.

U

UIXplor Team

February 25, 2026 · 5 min read

✦

01backdrop-filter vs filter

`filter` applies effects to the element itself (including its children). `backdrop-filter` applies effects to whatever is visible through the element (the background):

css
/* filter: blurs the element and its children */
.img-blur { filter: blur(10px); }

/* backdrop-filter: blurs what's behind, not the element */
.glass { backdrop-filter: blur(10px); background: rgba(255,255,255,0.1); }

02Available Filter Functions

css
.panel {
  /* Blur the background */
  backdrop-filter: blur(12px);

  /* Darken the background */
  backdrop-filter: brightness(0.6);

  /* Saturate/desaturate */
  backdrop-filter: saturate(1.8);

  /* Combine multiple */
  backdrop-filter: blur(12px) brightness(0.8) saturate(1.5);

  /* Don't forget WebKit prefix */
  -webkit-backdrop-filter: blur(12px) brightness(0.8);
}

03Performance Considerations

`backdrop-filter` is GPU-intensive. Each element with `backdrop-filter` creates a new compositing layer and repaints the backdrop on every scroll frame.

Best practices: - Use on static or rare elements (modals, navbars) not lists of cards - Test on mid-range mobile devices - Provide a solid-color fallback:

css
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(10, 10, 15, 0.92); }
}

Related UI Components

◈

Collections

All UI component collections

🧊

Glass Effects

Frosted glass UI components

Back to Blog