<div class="DynamicShadow"></div>

<div class="Credits">
  <span>Photo by <a href="https://unsplash.com/@frostroomhead?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Rodion Kutsaev</a> on <a href="https://unsplash.com/s/photos/colors?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
</div>

html {
  height: 100%;
}

body {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  overflow: hidden;
}

.DynamicShadow {
  background: url(https://images.unsplash.com/photo-1550684848-fac1c5b4e853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80)
    center / cover;
  height: 20em;
  position: relative;
  width: 40em;
}

.DynamicShadow::after {
  background: inherit;
  content: "";
  filter: blur(0.4em);
  height: 100%;
  opacity: 0.6;
  position: absolute;
  transform: scale(1.02);
  width: 100%;
}

/* --------------------- */
.Credits {
  bottom: 1em;
  font-family: sans-serif;
  position: absolute;
}