The CSS Box Shadow Property

CSS (specifically CSS3) allows you to create what is known as a box shadow. It's a visual effect which will literally create a shadow around an HTML element that you specify. You can control the css box shadow with a number of associated properties and values.

HTML Example:

CSS Example:

 #box-shadow {
display:block;
width:200px;
height: 75px;
background: red;
box-shadow: 7px 7px 5px #000000;
-webkit-box-shadow: 7px 7px 5px #000000;
} 

 #box-shadow2 {
display:block;
width:200px;
height: 75px;
background: red;
box-shadow: 12px 5px 0px gray;
-webkit-box-shadow: 12px 5px 0px gray;
}   

Result:

As you can see there's a bit of a difference between the two examples. The first thing that might confuse you is why there's a need to duplicate the properties, one with "-webkit". Unfortunately not all browsers treat CSS3 the same, the -webkit- version pertains to Safari.

Browser Compatibility of CSS Box Shadow

The following browsers support the box shadow property:

• IE9 and future vesions.
• Firefox 4
• Google Chrome
• Opera
• Safari (-webkit- property)

Only the newer versions of browser support the css3 box shadow property. One downfall to using the box-shadow css property is a decent % of visitors won't be able to see it if they're using an older browser.