<div class="container h-100">
  <div class="row justify-content-center align-items-center h-100">
    <div class="col text-center">
      <div class="image text-center">
        <div class="image-normal"></div>
        <div class="image-blurred-shadow"></div>
        </d>
      </div>
    </div>
  </div>

html,
body {
  margin: 0;
  padding: 0;
  color: #fff;
  background: #000;
  width: 100vw;
  height: 100vh;
}
.image-normal {
  background-image: url("https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&q=80");
  background-size: cover;
  width: 220px;
  height: 184px;
  border-radius: 8px;
  margin: 0 auto;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.image-blurred-shadow {
  background-image: url("https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&q=80");
  background-size: cover;
  width: 260px;
  height: 220px;
  border-radius: 8px;
  z-index: 1;
  filter: blur(12px);
  -webkit-filter: blur(32px);
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  opacity: 0.5;
  transform: translate(-50%, -50%);
}