Using CSS backdrop-filter for UI Effects | CSS-Tricks
April 17, 2025
If you’re familiar with CSS filter functions like blur() and brightness(), then you’re also familiar with backdrop filter functions. They’re the same. You can find a complete list of supported filter functions here at CSS-Tricks as well as over at MDN.The difference between the CSS filter and backdrop-filter properties is the affected part of an element. Backdrop filter affects the backdrop of an element, and it requires a transparent or translucent background in the element for its effect to be visible. It’s important to remember these fundamentals when using a backdrop filter, for these reasons:to decide on the aesthetics,to be able to layer the filters among multiple elements, andto combine filters with other CSS effects.
Source: Using CSS backdrop-filter for UI Effects | CSS-Tricks
CSS filters have been around for well over a decade (Firefox lead the charge on this one, something that’s waned in the intervening years, but kudos to Firefox the first browser to implement the long awaited Temporal features, an update to JavaScript’s ancient Date Time functionality).
But backdrop filters, though related, are more powerful and detailed here by Preethi at CSS Tricks.
