<html>
  <body>
    <img class="normal-shadow" src="https://kiko.io/photos/mobile/DSC_8860.jpg" />
    <div class="image-wrapper">
      <img src="https://kiko.io/photos/mobile/DSC_8860.jpg" />
      <img class="shadow" src="https://kiko.io/photos/mobile/DSC_8860.jpg" />
    </div>
  </body>
</html>
body {
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
}
img.normal-shadow {
  width: 200px;
  height: auto;
  margin: 1rem 2rem 2rem 1rem;
  box-shadow: 0px 25px 25px -10px #666;
}
div.image-wrapper {
  position: relative;
  width: 200px;
  margin: 1rem;  
}
div.image-wrapper img {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}
div.image-wrapper img.shadow {
  position: absolute;
  left: 5%;
  top: 30px;
  width: 90%;
  z-index: 0;
  filter: blur(10px);
  opacity: 0.8;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.