Box Shadow

<div id="container">
  <div class="no-blur-shadow box">Without Blur</div>
  <div class="with-blur-shadow box">With a Blur Radius of 10px</div>
  <div class="high-blur-shadow box">With a Blur Radius of 15px</div>
  <div class="low-blur-shadow box">With a Blur Radius of 10px</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;
}

.no-blur-shadow {
  box-shadow: 10px 10px pink;
}

.with-blur-shadow {
  box-shadow: 10px 10px 10px orange;
}

.high-blur-shadow {
  box-shadow: -10px 10px 15px rgba(0, 0, 0, 0.5);
}

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