htmlcssblur

How can I blur everything around an element with CSS?

Let's take this page as an example. How can you blur every element on the page (below the header navigation) except for one selected element ON the page (which should receive focus)?

If you blur the entire content area, the focused element will be blurred too (you can't unblur a child of a blurred parent). And if you select (and check) every single element whether it should be blurred or not can't be the best way to do so. Also, the element should stay within the content area and not be transformed HTML-wise in any way.

This: enter image description here

Should become this (with CSS only): enter image description here

It would be easy to just darken it with an absolute positioned overlay and give the focused element a relative position with a higher z-index, but unfortunately, blurring that dark overlay does not blur the content behind it: enter image description here

Solution

  • A backdrop-filter solved this issue, thank you @Sheraff and @epascarello 23

    focus-blur-effect-in-css ㅤ

    CSS:

    width: 100%;
height: calc(100vh - 50px);
background: rgba(0, 0, 0, .2);
position: absolute;
z-index: 10;
backdrop-filter: blur(3px);