Add Shadows with CSS box-shadow Property
Over the last few years web browsers have made a lot of progress to add new features based on what is shaping up to be HTML5 and CSS3. I’ve already demonstrated what can be done with new CSS properties such as the CSS border-radius property. Now, I’ll cover the CSS box-shadow property.
Using box-shadow
This tutorial will demonstrate how to add shadows to a div HTML element using the CSS box-shadow property. For the purpose of this tutorial, we’ll the following CSS class that defines our div box.
.box {
width: 100px;
height: 100px;
float:left;
}
As you can figure out by the property name, the box-shadow property can be used to create a shadow outside, or inside of your div box. In the simplest forms, you can add a drop shadow on the lower right of a div tag by adding the following CSS on the style attribute of the div.
<div class='box' style='box-shadow: 20px 20px 50px blue;'></div>
The first numeric value in the box-shadow property is the length of the shadow on the horizontal side of the div box, the second numeric value is the length of the shadow on the vertical side. The third value is the length of the blur. Additionally, you can add a blur color.
By default, having positive values for the horizontal and vertical blur length will produce a blue on the lower right of the div tag. Negative values are allowed which will mirror the blur on the other side. For example, to create a blue on the lower left side of the div tag change the box-shadow to the following.
<div class='box' style='box-shadow: -20px 20px 50px blue;'></div>
Using box-shadow with inset
You can add an additional value, inset, to force the shadow to be inside of the div tag. By default, by adding the inset value the shadow will be on the top left of the div but inside of the box.
<div class='box' style='box-shadow: 20px 20px 50px blue inset;'></div>
To change the direction of the box shadow, just switch the horizontal and vertical blur length values from positive values to negative.
Even blur
In addition to negative or positive values, you can enter 0 for the horizontal and vertical blur length. When you enter 0, the blur will be on both top-bottom for the horizontal and left-right for the vertical directions.
<div class='box' style='box-shadow: 0px 0px 50px blue;'></div>
Examples of box-shadow CSS property
To see some more examples of the box-shadow property in action see the the following gist.
Modern browsers
The CSS box-shadow works on modern browsers, which include the latest version of Safari, Chrome, and Firefox. As of this writing, it does not work in Internet Explorer.
