Material Design Box Shadows
box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);transition:all 0.2s ease-in-out;
box-shadow:0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
box-shadow:0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
box-shadow:0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
box-shadow:0 2px 10px 0 rgba(0,0,0,.16);
box-shadow:0 2px 5px 0 rgba(0,0,0,.26);
box-shadow:0 6px 20px 0 rgba(0,0,0,.19);
<![CDATA[
<div class="cbox"></div>
<div class="cbox cbx-1"></div>
<div class="cbox cbx-2"></div>
<div class="cbox cbx-3"></div>
<div class="cbox cbx-4"></div>
<div class="cbox cbx-5"></div>
<div class="cbox cbx-6"></div>
<div class="cbox cbx-7"></div>
<div class="cbox cbx-8"></div>]]>
<![CDATA[
.cbox {background: #fff;border-radius: 2px;height: 300px; margin: 0 0 25px 0; width:100%;}
.cbx-1 {box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
.cbx-1:hover {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);transition: all 0.2s ease-in-out;}
.cbx-2 {box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}
.cbx-3 {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
.cbx-4 {box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
.cbx-5 {box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);}
.cbx-6 {box-shadow: 0 2px 10px 0 rgba(0,0,0,.16)}
.cbx-7 {box-shadow: 0 2px 5px 0 rgba(0,0,0,.26)}
.cbx-8 {box-shadow: 0 6px 20px 0 rgba(0,0,0,.19)}
]]>
