SOURCE

<h1>Try changing the <code>--size</code> CSS variable to see how the images react</h1>

<div class="sqrs">
  <div class="sqr" style="--img: url(https://images.unsplash.com/flagged/photo-1576533071143-28014b3839cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80);"></div>

  <div class="sqr" style="--img: url(https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80)"></div>

  <div class="sqr" style="--img: url(https://images.unsplash.com/photo-1581466046946-06ea1cdcda9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80)"></div>

  <div class="sqr" style="--img: url(https://images.unsplash.com/photo-1582565245597-1d14b23c5647?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1339&q=80)"></div>

  <div class="sqr" style="--img: url(https://images.unsplash.com/photo-1558470598-a5dda9640f68?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80)"></div>
</div>

.sqr {
  --size: 200px;

  height: var(--size);
  width: var(--size);
  border-radius: calc(var(--size) * 0.15);
  background: {
    image: var(--img);
    size: cover;
    repeat: no-repeat;
  }
  position: relative;

  &::after {
    content: "";
    position: absolute;
    width: calc(var(--size) * 0.8);
    height: 100%;
    top: calc(var(--size) * 0.05);
    left: 50%;
    transform: translateX(-50%);
    background: {
      image: var(--img);
      size: cover;
      repeat: no-repeat;
    }
    z-index: -1;
    filter: blur(20px) opacity(70%);
  }
}

// boring
body {
  margin: 0;
  font-family: Arial, sans-serif;
  height: 100vh;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display: flex;
  background-color: #f6f6f6;
  grid-template-rows: 100px auto;
}

h1 {
  margin-bottom: 80px;
}

code {
  background-color: #343434;
  color: orange;
  padding: 3px 6px;
  border-radius: 4px;
}

.sqrs {
  display: flex;
  flex-flow: row wrap;
  justify-items: center;
  justify-content: center;
  align-items: center;
}

.sqr {
  margin: 10px;
}