Размытие с использованием CSS

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html, 
body { 
  width: 100vw; 
  height: 100vh; 
  background-color: #272727; 
} 
 
.wrapper { 
  position: relative; 
  width: 100vw; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
 
.layer-one { 
  position: relative; 
  width: 100vw; 
  height: 100vh; 
  background-image: url(https://img-fotki.yandex.ru/get/6206/43810070.8/0_5c834_17e56af9_orig); 
  background-repeat: no-repeat; 
  background-size: auto; 
} 
 
.layer-two { 
  position: absolute; 
  top: 115px; 
  left: 125px; 
  width: 50vw; 
  height: 50vh; 
  background-image: url(https://img-fotki.yandex.ru/get/6206/43810070.8/0_5c834_17e56af9_orig); 
  background-repeat: no-repeat; 
  background-position: -125px -115px; 
  background-size: auto; 
  filter: blur(15px); 
}

<div class="wrapper"> 
  <div class="layer-one"></div> 
  <div class="layer-two"></div> 
</div>

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html, 
body { 
  width: 100vw; 
  height: 100vh; 
  background-color: #272727; 
} 
 
.wrapper { 
  position: relative; 
  width: 100vw; 
  height: 100vh; 
  background-image: url(https://img-fotki.yandex.ru/get/6206/43810070.8/0_5c834_17e56af9_orig); 
  background-repeat: no-repeat; 
  background-size: cover; 
} 
 
.blur-layer { 
  position: absolute; 
  backdrop-filter: blur(15px); 
  background: rgba(255, 255, 255, 0.1); 
  width: 60%; 
  height: 50%; 
  top: 25%; 
  left: 15%; 
}

<div class="wrapper"> 
  <div class="blur-layer"></div> 
</div>