A very easy way to use box-shadow in a nice way

-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;
}

Hopefully this will give you a way to think more about some other techniques

Check it here