filter vs backdrop-filter: What's the Difference?

Same Functions, Different Target

backdrop-filter accepts exactly the same set of filter functions as filter — blur, brightness, saturate, and the rest — but applies them to a fundamentally different part of the page.

What filter Affects

filter applies its effect to the element itself and everything inside it — its content, its background, its children. If you blur a div with filter, the div and everything visually inside it gets blurred.

What backdrop-filter Affects

backdrop-filter applies its effect to whatever is visible behind the element — the content sitting underneath it, through any transparency — while the element's own content stays sharp and unaffected.

The Frosted Glass Effect

.glass-panel {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px) saturate(150%);
}

This is exactly how the popular "frosted glass" or "glassmorphism" look works — a semi-transparent background lets whatever's underneath show through, while backdrop-filter: blur() softly blurs that background content, and any text or content placed directly inside the panel itself stays crisp.

Why You Can't Get This With filter Alone

Using filter: blur() on the same panel would blur the panel's own content along with everything behind it — there'd be no way to keep foreground text sharp while blurring only the background. backdrop-filter exists specifically to separate these two concerns.

A Quick Decision Guide

• Want to change how an element and its own content look: filter.
• Want to blur or adjust what's visible behind a semi-transparent element: backdrop-filter.