Bootstrap snippet: Box shadow effect

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: div,box,shadow



<div class="container bootstrap snippets"> <div class="row"> <div class="col-sm-2 text-center"> <p>Without shadow</p> <div class="box-shadow-demo"></div> </div> <div class="col-sm-2 text-center"> <p>.z-depth-1</p> <div class="box-shadow-demo z-depth-1"></div> </div> <div class="col-sm-2 text-center"> <p>.z-depth-2</p> <div class="box-shadow-demo z-depth-2"></div> </div> <div class="col-sm-2 text-center"> <p>.z-depth-3</p> <div class="box-shadow-demo z-depth-3"></div> </div> <div class="col-sm-2 text-center"> <p>.z-depth-4</p> <div class="box-shadow-demo z-depth-4"></div> </div> <div class="col-sm-2 text-center"> <p>.z-depth-5</p> <div class="box-shadow-demo z-depth-5"></div> </div> </div> </div>
body{margin-top:20px;} .box-shadow-demo { background-color: #009688; height: 100px; width: 100px; margin: 20px auto; } .z-depth-1 { -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37); box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37); } .z-depth-2 { -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3); } .z-depth-3 { -webkit-box-shadow: 0 11px 7px 0 rgba(0,0,0,0.19),0 13px 25px 0 rgba(0,0,0,0.3); box-shadow: 0 11px 7px 0 rgba(0,0,0,0.19),0 13px 25px 0 rgba(0,0,0,0.3); } .z-depth-4 { -webkit-box-shadow: 0 14px 12px 0 rgba(0,0,0,0.17),0 20px 40px 0 rgba(0,0,0,0.3); box-shadow: 0 14px 12px 0 rgba(0,0,0,0.17),0 20px 40px 0 rgba(0,0,0,0.3); } .z-depth-5 { -webkit-box-shadow: 0 17px 17px 0 rgba(0,0,0,0.15),0 27px 55px 0 rgba(0,0,0,0.3); box-shadow: 0 17px 17px 0 rgba(0,0,0,0.15),0 27px 55px 0 rgba(0,0,0,0.3); }
Dey-Dey

Box shadow effect

Dey-Dey
  Apr 9th, 21:54
1.1K Views