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)

HTML
<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>
CSS
.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)}