Uma maneira muito fácil de usar o box-shadow de uma maneira agradável

-HTML-

<div class="header">
  <h2> Nice way to use box-shadow V2</h2>
</div>

-CSS-

.header{
  width:70%;
  height:140px; /*If you want to increase the height just increase tje top for :before : after the same value : example height:240; top:217 so the added value = 200 for btoh.*/
  background:#4cbb47;
  margin:2% auto;
  position:relative;
  border-radius:4px;
}
.header:before,.header:after{
  content:"";
  width:300px;
  height:10px;
  background:#000;
  position:absolute;
  top:117px;/*Here to add the added value; ex:217*/
  z-index:-1;
  box-shadow: 0 14px 10px #777;
}
.header:before{
  left:2px;
  transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);  
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);  
}
.header:after{
  right:0;
  transform: rotate(3deg);
  -webkit-transform: rotate(3deg);  
  -moz-transform: rotate(3deg);  
  -ms-transform: rotate(3deg);  
  -o-transform: rotate(3deg);  
}
h2{
  text-align:center;
  position:relative;
  top:50px;
  color:#2184a0;
  font-weight:bold;
  font-size:25px;
}

/*Just a small piece of tip to change the selection background-color*/
::selection {
  background:#d84e4b;
}

Esperamos que isso lhe dê uma maneira de pensar mais sobre algumas outras técnicas

Verifique aqui