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).

See the Pen Blur Content Behind Div With CSS backdrop-filter by Andreas Wik (@andreaswik) on CodePen.

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!