How can I blur the whole body but not the only one div?

Question

I want that the whole area behind the highlighted white div box should be blurred but not that the div

Answer 1

Add this to the CSS of your body element (or the one you wanna show blurred).

body {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

That 8px is the intensity of blur effect and can be changed as you like.

Here is an example:

body,
html {
  height: 100%;
}

.parent {
  height: 100%;
  width: 100%;
  position: fixed;
  background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
  background-size: cover;
  filter: blur(3px);
  z-index: 5;
  -webkit-filter: blur(3px);
}

.child {
  height: 200px;
  width: 200px;
  z-index: 10;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  position: fixed;
  background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
  background-size: cover;
}

<div class="parent">
</div>
<div class="child"></div>