The backdrop-filter property in CSS applies visual effects such as blur, brightness, contrast, and grayscale to the area behind an element.
Unlike the filter property, which affects the element itself, backdrop-filter affects the content visible behind the element.
It is commonly used for glassmorphism effects, modal popups, navigation bars, side panels, dropdown menus, and modern UI designs.
Syntax
[code theme="dark"]
selector {
backdrop-filter: blur(10px);
}
[/code]
Property Values
none - No effect is applied.blur() - Blurs the content behind the element.brightness() - Adjusts brightness.contrast() - Adjusts contrast.grayscale() - Converts colors to grayscale.invert() - Inverts colors.opacity() - Changes transparency.saturate() - Adjusts color saturation.sepia() - Applies a sepia effect.
Basic Example
[code theme="dark"]
.glass-card {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
[/code]
In this example, the content behind the card becomes blurred while the card remains visible and readable.
Filter vs Backdrop Filter
Many beginners confuse filter and backdrop-filter .
filter affects the element itself.backdrop-filter affects whatever is behind the element.
filter Example
[code theme="dark"]
img {
filter: blur(5px);
}
[/code]
The image itself becomes blurred.
backdrop-filter Example
[code theme="dark"]
.glass-panel {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
}
[/code]
The background behind the panel becomes blurred while the panel content remains sharp.
Real-World Example: Modal Popup Blur Effect
Before backdrop-filter became widely supported, creating a blurred background behind a popup was difficult.
Developers often had to duplicate background images, use JavaScript libraries, or create complex overlays to simulate blur effects.
Today, a single CSS property can blur the entire page behind a modal popup.
HTML
[code theme="dark" live="true" data="eyJmaWxlcyI6eyIvaW5kZXguaHRtbCI6IjwhRE9DVFlQRSBodG1sPlxuPGh0bWw+XG48aGVhZD5cbiAgPGxpbmsgcmVsPVwic3R5bGVzaGVldFwiIGhyZWY9XCJzdHlsZS5jc3NcIj5cbjwvaGVhZD5cbjxib2R5PlxuPGRpdiBjbGFzcz1cImRlbW8tY29udGFpbmVyXCI+XG4gICAgPGRpdiBjbGFzcz1cImRlbW8tb3ZlcmxheVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZGVtby1tb2RhbFwiPlxuICAgICAgICAgICAgPGgyPkxvZ2luIFBvcHVwPC9oMj5cbiAgICAgICAgICAgIDxwPlRoZSBiYWNrZ3JvdW5kIGJlaGluZCB0aGlzIHBvcHVwIGlzIGJsdXJyZWQgdXNpbmcgYmFja2Ryb3AtZmlsdGVyLjwvcD5cbiAgICAgICAgICAgIDxidXR0b24+Q29udGludWU8L2J1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG48L2Rpdj5cbjwvYm9keT5cbjwvaHRtbD4iLCIvc3R5bGUuY3NzIjoiLmRlbW8tY29udGFpbmVyIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgbWF4LXdpZHRoOiA5MDBweDtcbiAgICBoZWlnaHQ6IDQwMHB4O1xuXG4gICAgbWFyZ2luOiAyMHB4IGF1dG87XG5cbiAgICBiYWNrZ3JvdW5kOiB1cmwoXCJodHRwczovL2ltYWdlcy51bnNwbGFzaC5jb20vcGhvdG8tMTUwNjc0NDAzODEzNi00NjI3MzgzNGIzZmI/dz0xMjAwXCIpXG4gICAgICAgIGNlbnRlci9jb3ZlciBuby1yZXBlYXQ7XG5cbiAgICBib3JkZXItcmFkaXVzOiAxMnB4O1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG59XG5cbi5kZW1vLW92ZXJsYXkge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBpbnNldDogMDtcblxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgIGJhY2tncm91bmQ6IHJnYmEoMCwgMCwgMCwgMC4zKTtcbiAgICBiYWNrZHJvcC1maWx0ZXI6IGJsdXIoOHB4KTtcbn1cblxuLmRlbW8tbW9kYWwge1xuICAgIHdpZHRoOiAzNTBweDtcbiAgICBwYWRkaW5nOiAyNHB4O1xuXG4gICAgYmFja2dyb3VuZDogd2hpdGU7XG4gICAgYm9yZGVyLXJhZGl1czogMTJweDtcblxuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cblxuLmRlbW8tbW9kYWwgYnV0dG9uIHtcbiAgICBwYWRkaW5nOiAxMHB4IDIwcHg7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1yYWRpdXM6IDZweDtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG59In0sImFjdGl2ZUZpbGUiOiIvaW5kZXguaHRtbCIsInRlbXBsYXRlIjoidmFuaWxsYSJ9"]
Login Popup
The background behind this popup is blurred using backdrop-filter.
Continue
[/code]
[code theme="dark"]
.demo-container {
position: relative;
width: 100%;
max-width: 900px;
height: 400px;
margin: 20px auto;
background: url("https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1200")
center/cover no-repeat;
border-radius: 12px;
overflow: hidden;
}
.demo-overlay {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(8px);
}
.demo-modal {
width: 350px;
padding: 24px;
background: white;
border-radius: 12px;
text-align: center;
}
.demo-modal button {
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
}
[/code]
When the popup opens, everything behind the overlay becomes blurred. This creates a modern user experience and helps users focus on the active dialog.
Before vs After backdrop-filter
Before
Required complex CSS workarounds.
Often needed duplicated background images.
JavaScript solutions were commonly used.
More code and maintenance effort.
After
Simple one-line CSS solution.
Cleaner and easier to maintain.
Creates modern glassmorphism effects.
Perfect for modals, sidebars, and navigation menus.
Glassmorphism Example
[code theme="dark"]
.glass {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(15px);
border-radius: 12px;
}
[/code]
This technique is commonly used in dashboards, SaaS products, landing pages, and mobile applications.
Common Use Cases
Modal Popups
Glassmorphism Cards
Sticky Navigation Bars
Mobile Menus
Side Panels
Dropdown Menus
Dashboard Interfaces
Login Forms
Important Notes
The element should have some transparency for the effect to be visible.
There must be visible content behind the element.
Works best with rgba() backgrounds.
Higher blur values may affect rendering performance.
Always test across browsers before production use.
Browser Support
The backdrop-filter property is supported in modern versions of Chrome, Edge, Safari, and Firefox.
Older browsers may not fully support this feature, so consider providing a fallback design when necessary.
Conclusion
The backdrop-filter property makes it easy to create professional blur and glass effects without complicated CSS tricks or JavaScript workarounds. It is one of the most useful modern CSS properties for building visually appealing user interfaces.