Custom shadow with CSS

Question

How do I make a shadow per the image below? I don't have any idea how to do that.

Answer 1

One way you can do it is by styling the pesedo elements ::before and ::after like this:

div {
  width: 300px;
  height: 400px;
  background: #FFF;
  margin: 40px auto;
  position: relative;
}

div::before,
div::after {
  z-index: -1;
  position: absolute;
  content: "";
  width: 50%;
  height: 50%;
  right: 10px;
  top: 10px;
  max-width: 300px;
  background: #777;
  box-shadow: 15px 0px 10px #777;
  transform: rotate(3deg);
}

div::after {
  transform: rotate(-3deg);
  top: calc(50% - 10px);
}

<div></div>

This see pen for more shadow styling.