CSS-3 Box-Shadow

CSS3 box-shadow is supported in Firefox 3.1 (beta) and Safari 3.1.2..

css-selector { boxShadow : xOffset yOffset blurRadius shadowColor }

Unfortunately this is not supported in Internet Explorer, but it is however possible to create an equivialant effect with the IE popertiary CSS Filter Blur and serve this with the jQuery plugin jquery.boxshadow.js.

$(css-selector).boxShadow( xOffset, yOffset, blurRadius, shadowColor );

Note: The JavaScript need to position the parent element of the box relative.

Download

jquery.boxshadow.js

Examples

box-shadow: 10px 10px 5px #888;

There should be a nice grey fading shadow under this box…

box-shadow: -10px -10px 0px #000;

There should be a hard black shadow above this one.

box-shadow: 0 0 5px #f00;

There should be a soft red shadow around this one.