Cross Browser CSS Box Shadows

Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we aren't good with graphic creation, however, doesn't mean that our clients wont effects like box shadows.  Once such project recently popped up for me, so I sought a cross browser compatible solution for programmatic box shadows.  Here's my solution.

The CSS

As you can probably imagine, Internet Explorer is the odd duck when it comes to accomplishing CSS box shadows.  The other browsers stick to a more unified syntax:

div.shadow {
	-moz-box-shadow: 3px 3px 4px #444;
	-webkit-box-shadow: 3px 3px 4px #444;
	box-shadow: 3px 3px 4px #444;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
}

There are four main pieces to the -box-shadow property: offset-x offset-y, blur-radius, spread-radius, and color.  Internet Explorer's syntax is a bit uglier and less configurable, but allows for CSS-based box shadows nonetheless.  If you specify the inset keyword at the beginning of the box-shadow value, the box shadow will appear inside the element!

Like border-radius, gradients, transformations, and a variety of other relatively new CSS properties, advancements in CSS are helping Photoshop-inept developers like myself to create programmatic art.  I do have to admit that box shadows are nice and can provide a small layer of depth.