Box shadow effect

This bootstrap snippet called "Box shadow effect" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: div,box,shadow

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

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

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

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

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Feb 1st 2016, 21:28

Views: 3.3K

Rated 5/5 based on 1 reviews