What is backdrop-filter (CSS)?

backdrop-filter takes the same filter functions as filter (blur(), saturate(), brightness(), contrast() and the rest) but applies them to the pixels behind the element instead of to the element itself. The element's own background must be at least partly transparent, or there is nothing to see through. Combine a translucent fill with backdrop-filter: blur(16px) and content scrolling underneath turns into a soft wash of color. That is the core of the glassmorphism look and of most sticky headers on modern sites.

How it works

The browser takes everything painted behind the element, runs the filter chain on it, clips the result to the element's border box (including border-radius), then paints the element's own background, border and content on top. Filters run in the order you list them.

.glass-panel {
  background: oklch(1 0 0 / 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid oklch(1 0 0 / 0.6);
}

saturate() after blur() keeps the colors behind the panel from turning gray, which is why most glass recipes pair them. The prefixed property covers older Safari releases; current versions of every major engine support the unprefixed form. In Tailwind CSS the same effect is backdrop-blur-xl backdrop-saturate-150 on an element with a translucent background such as bg-white/50.

Common pitfalls

• Nothing behind it. Blur over a flat, solid page looks like a plain gray box. Glass needs color or imagery behind it.
• Contrast. Text on a translucent panel changes contrast as content moves beneath it. Check the worst case against WCAG contrast and raise the fill opacity if needed.
• Performance. Whenever the region behind the element changes, the filter runs again. Large blur radii on big, full-screen or animated layers can drop frames on low-end phones. Keep blurred areas modest in size and number.
• Containing blocks. Like filter, any value other than none makes the element the containing block for position: fixed descendants, so a fixed child positions against the panel instead of the viewport.
• Nested glass. An ancestor with a filter, opacity below 1, a mask or its own backdrop-filter acts as a backdrop root. A blurred child samples only what lies inside that ancestor, so stacked glass can look weaker than expected.

How MiniDev UI uses it

The glass material is built on it. Set data-material="glass" on <html> or any subtree and every bg-surface and bg-raised element picks up backdrop-filter: blur(22px) saturate(1.8) through a material hook variable, with a sheen positioned by LightProvider. Components do not change; the CSS variables do. To tune your own values visually, use the glassmorphism generator, and read glassmorphism in Tailwind CSS for the full recipe, including fallbacks.