.shadow-wrapper { z-index: 1; position: relative; } /*Common Style*/ .box-shadow { background: #fff; position: relative; } .box-shadow:after, .box-shadow:before { top: 80%; left: 5px; width: 50%; z-index: -1; content: ""; bottom: 15px; max-width: 300px; background: #999; position: absolute; } /*Effect 1*/ .shadow-effect-1 { box-shadow: 0 10px 6px -6px #bbb; -moz-box-shadow: 0 10px 6px -6px #bbb; -webkit-box-shadow: 0 10px 6px -6px #bbb; } /*Effect 2,3,4*/ .shadow-effect-2 { position: relative; } .shadow-effect-2:after, .shadow-effect-2:before, .shadow-effect-3:before, .shadow-effect-4:after { transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); box-shadow: 0 15px 10px #999; -moz-box-shadow: 0 15px 10px #999; -webkit-box-shadow: 0 15px 10px #999; } .shadow-effect-2:after, .shadow-effect-4:after { left: auto; right: 5px; transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); -moz-transform: rotate(3deg); -webkit-transform: rotate(3deg); }