Box Shadow

<div id="container">
  <div class="box right-downward-shadow">
    <p>x-offset: 10px<br>y-offset: 10px</p>
  </div>
  <div class="box right-upward-shadow">
    <p>x-offset: 10px<br>y-offset: -10px</p>
  </div>
  <div class="box left-downward-shadow">
    <p>x-offset: -10px<br>y-offset: 10px</p>
  </div>
  <div class="box left-upward-shadow">
    <p>x-offset: -10px<br>y-offset: -10px</p>
  </div>
</div>

#container {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: peachpuff;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  width: 220px;
  margin: 20px;
  font-size: 18px;
  background-color: coral;
}

.right-downward-shadow {
  box-shadow: 10px 10px;
}

.right-upward-shadow {
  box-shadow: 10px -10px;
}

.left-downward-shadow {
  box-shadow: -10px 10px;
}

.left-upward-shadow {
  box-shadow: -10px -10px;
}