Why does drop-shadow appear different?

Question

I have two divs with the same drop-shadow effect but the outcome is different. The shadow effect appears more light on the header div, why is that?

#templateHeader {
  background-color: #f5f5f5;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-top: 0;
  border-bottom: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  border-radius: 5px 5px 0px 0px;
  overflow: hidden;
  filter: drop-shadow(0 5px 10px black)
}

#templateBody {
  background-color: #F5F5F5;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-top: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 0px 0px 5px 5px;
  filter: drop-shadow(0 5px 10px black)
}