home

Css3 Box Shadow

Css3 box shadow is used to create a shadow for boxes any type boxes like the rectangle and rounded and more. In elders version if we want to create borders for a box or any object it needs to use some shadow images by creating in Photoshop or any another graphics tools.

Css3 Box Shadow Code

We have peace of code which use to create box shadow (box-shadow) in css3, with help some other properties like width, height, border and background-color. Css3 box-shadow property has some values like 100px (shadow-box position moves left to right), 50px (shadow-box position move to top to bottom), 10px (box-shadow width).

<div class="box-shadow"></div>
<style>.box-shadow {
    width: 400px;
    height: 200px;
    border:10px solid #ffffff;
    background-color: #003760;
    box-shadow: 100px 50px 10px #f00;
} </style>
<div class="box-shadow"></div>
<style>.box-shadow {
    width: 400px;
    height: 100px;
   border:10px solid #ffffff;
    background-color: #003760;
    box-shadow: 100px 50px 10px #f00;
} </style>

Css3 Box Shadow Demo

Here we have simple rectangle box shadow example demo

 

Box Shadow Browser Compatibility(Support)

Browser Name Version Supporting tag
IE 11.0  
Mozilla Firefox 15.0- 3.5 -moz-
Google Chrome 16.0- 4.0 -webkit-
Safari(apple) 6.0- 3.1 -webkit-
Opera 15.0-11.0 -o-