How to Blur the Div Element

How to blur ALL elements behind a div (text, shapes, buttons - not just the background image). CSS only if possible

I blurred by background image externally, and then took out the blur in css (as people told me to for performance reasons in the comments).

After doing that, and without changing anything else, now my blur works on the navbar! It seems to be that the background blur was messing up a bunch of stuff.

Thank you for the help in the comments!

P.S. The fixed positioning that didn't work before now works?!?

how do i blur the div only and not its elements

Unfortunately, if you blur (or use transparancy) on an element, this will effect all child elements as well.

The only way around this is to take the contents of the blurred box and place it as a sibling. Than use some CSS to position it on top.

How to blur(css) div without blur child element

How to disable blur on child element?

.enableBlur>* {  filter: blur(1.2px);}
.disableBlur {  filter: blur(0);}

<div class="enableBlur">  <hr>  qqqqq<br>  <span>qqqqq</span><br>  <hr  class="disableBlur">  <div>aaaaa</div>  <div>bbbbb</div>  <div class="disableBlur">DDDDD</div>  <hr>  <img src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">  <img class="disableBlur" src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48"></div>

Blur Behind Div CSS

backdrop-filter: blur(10px);

It will blur area behind the element.

How can I blur everything around an element with CSS?

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

Sample Image