Box Shadow

<div id="container">
  <div class="box shadow-expand">With Spread Radius of 10px</div>
  <div class="box shadow-enlarge">With Spread Radius of 20px</div>
  <div class="box shadow-shrink">With Spread Radius of -10px</div>
  <div class="box shadow-collapse">With Spread Radius of -20px</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: 30px;
  font-size: 18px;
  background-color: coral;
}

.shadow-expand {
  box-shadow: 10px 10px 10px 10px pink;
}

.shadow-enlarge {
  box-shadow: 10px 10px 10px 20px orange;
}

.shadow-shrink {
  box-shadow: -20px 20px 10px -10px rgba(0, 0, 0, 0.5);
}

.shadow-collapse {
  box-shadow: -20px -20px 10px -20px rgba(50, 50, 90, 0.25);
}