backdrop-filter: Styling What's Behind an Element
Think of backdrop-filter as frosted glass for your UI. It applies graphical effects like blur to the content *behind* an element. It's ideal for overlays like modals or navigation bars to improve legibility.
Why it exists
Before backdrop-filter, achieving effects like a blurred background for a modal required complex workarounds. This often involved duplicating the background content, applying a filter to the duplicate, and carefully positioning it, which was inefficient and brittle. backdrop-filter provides a direct, performant way to style the area behind an element.
The mental model
Imagine a pane of frosted glass. You're not changing the glass itself, but how you see the world through it. backdrop-filter does this for a browser element. You place a semi-transparent element on the page, and this property applies a filter (like blur or color shift) to whatever content is visible behind it.
How it works
The backdrop-filter property applies one or more CSS filter functions to the pixels painted behind the element. For the effect to be visible, the element must have some level of transparency, typically set via its background-color (e.g., using rgba()). The filtering effect is contained by the nearest "backdrop root" ancestor, such as the <html> tag or an element with opacity < 1. This means the filter won't affect elements outside this boundary.
When to use it
Use backdrop-filter for UI elements that overlay other content. It's perfect for creating modern, layered designs. Common use cases include navigation bars that blur the page as you scroll, modal dialogs that dim and blur the background content, and translucent sidebars that maintain context.
When not to use it
Don't use it if you want to filter the element itself; for that, use the standard filter property. Avoid using it if the element's background is fully opaque, as the effect will be completely hidden. Be mindful of performance, as complex filters can be resource-intensive, especially on large areas or during animations.
One canonical example
To create a frosted glass effect for a modal's background overlay, you would style the overlay div with a semi-transparent background and a blur filter. For example: .modal-overlay { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); }. This makes the overlay slightly white and transparent, while blurring any page content visible behind it by 10 pixels.
Interview question
Which statement correctly describes the primary function of backdrop-filter in CSS?
- a.It filters all child elements nested within the element to which it is applied.
- b.It creates a filter effect that is only visible when the element's background is fully opaque.
- c.It applies graphical effects to the content behind an element, requiring the element itself to be semi-transparent.Correct
- d.It applies graphical effects directly to the element's own content, similar to the standard filter property.
Why? this is the answer
backdrop-filter is designed to apply effects to the content *behind* an element, acting like frosted glass, and requires the element to have some transparency to reveal the filtered background. It does not filter the element itself; that is the role of the standard 'filter' property.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles