Blur Content Behind Div With CSS
July 11, 2023 by Andreas Wik
This really cool CSS property backdrop-filter lets you apply various filters to the content behind the element you apply it to.
To blur the content, simply use it like this: backdrop-filter: blur(10px). Play around with the value 10px to find whatever works best for you. In this example below I have applied it on the navigation container which is fixed in the top. I have also set the background color to a half transparent white, rgba(255, 255, 255, 0.5).
There are other values than blur. There’s brightness, contrast, opacity and a bunch more. You can find more information about back-drop here.
Something to keep in mind is the browser compatibility – you can find the latest figures here.
Until next time!