Free! CSS Drop Shadows

In this free article, Sergio Villarreal shows how to use CSS to make drop shadows, in a way that works across all modern browswers and conforms to Web Standards.

This article was originally published by A List Apart and is reproduced by kind permission. It's copyright © 1998–2004 A List Apart Magazine, Happy Cog Studios, and Sergio Villarreal.

Additional notes

In this article, the styles for image and paragraph have been broken up for clarity, but both could be specified in one fell swoop with minor adjustments.

This technique has been tested with Gecko-based browsers, Safari, Opera and IE 5.0+. Apart from the differences noted, no problems were observed. It should work well with most of the stuff out there (no, not Netscape 4.x).

Since this article "went to press", Phil Baines worked out a method for improving the paragraph drop shadow markup. Take a look here: http://wubbleyew.com/tests/dropshadows.htm

Acknowledgements

To Dunstan for inventing the drop shadow technique and Douglas Bowman for the Sliding Doors technique