CSS Drop Shadow Without Using Images

Technique to build flexible CSS drop shadows applied to arbitrary block elements using plain and simple CSS and without using any images.

CSS drop shadow

This entry was posted on Monday, January 7th, 2008 at 12:00 am and is filed under CSS, Code, Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

« Say Goodbye to Straight-edged Text With CSS Text Wrapper
Cross-browser, Pure CSS Drop Down Menu »

4 Responses to “CSS Drop Shadow Without Using Images”

  1. Dan Beeston Says:
    January 7th, 2008 at 6:55 am

    Why would you choose this over an image? The whole point of css is to remove the presentation from the markup. Now you’ve just got a nice pot of div soup. Sure it’ll show up if your user has turned images off, but maybe there’s a reason they turned images off in the first place.

  2. jive Says:
    January 7th, 2008 at 11:43 pm

    It doesn’t look right in IE7, the bottom is off.

  3. Dennison Uy - Graphic Designer Says:
    January 11th, 2008 at 2:27 am

    Good catch, jive.

    Here’s a link to the demo page

  4. negs Says:
    April 14th, 2008 at 8:23 am

    Dan…I believe one reason might be if you had a bunch of elements of unknown height and width for which you wanted drop shadow. Perhaps not the purest use of css but a big time saver.

Leave a Reply