<div class="wrap">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <div class="box box4"></div>
</div>

.wrap {
  width: 600px;
  display: flex;
  margin: 0 auto;
  .box {
    width: 100px;
    height: 100px;
    margin: 10px;
  }
  .box1 {
    background-color: red;
    //x 軸-位移 | y 軸-位移 | 顏色
    box-shadow: 5px 5px gray;
  }
  .box2 {
    background-color: orange;
    //x 軸-位移 | y 軸-位移 | 模糊值 blur-radius｜ 顏色
    box-shadow: 5px 5px 5px gray;
  }
  .box3 {
    background-color: yellow;
    //x 軸-位移 | y 軸-位移 | 模糊值 blur-radius｜擴散值 spread-radius｜顏色
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  }
  .box4{
    background-color: #fff;
      //內側 ｜ x 軸-位移 | y 軸-位移 | 模糊值 blur-radius ｜ 擴散值 spread-radius ｜ 顏色
    box-shadow: inset 0 0 20px 5px gray;
  }
}