Right alongside background-gradient, box-shadow (CSS-speak for drop-shadows) gives a page depth. And, like background-gradients, images were usually how this was done. Either very, very large images, or unnecessary divs and annoying sprites… “Are they necessary?” Probably.

So, if you do need drop-shadows, here are ways to do it.

The Options

  • Internet Explorer Filters


    • Pure, valid CSS, no JS, no HTC, no tricks, no hacks!
    • IE8 offers vendor prefix (-ms) and IE6/7 use the proprietary filter, so can easily put that into IE-only stylesheet.
    • For better or worse, IE6, 7, and 8 are pretty stable as they are, and so it is pretty easy to know which does, and doesn’t, do what.
    • Easy to target specific browser versions if using HTML5 Boilerplate <head> conditional comments.


    • Fairly limited set of filters, and most look pretty crappy.
    • filter is invalid, so stylesheets will not validate, if you care about that.
    • At least one more line of CSS for each feature…
  • CSS3 PIE


    • Eliminates need for IE filters.
    • Comes as a single package, which also adds border-radius and drop-shadows to IE (only).
    • Is IE-only, so non-IE browsers get no additional weight, and if you add via an IE-only stylesheet, the rest of your stylesheets will validate (if that matters to you).


    • Comes as a single package, so if you don’t need those other features on a page, at 27.6kb, it’s a little heavy…
    • Because it requires a non-standard behavior for implementation, the stylesheet used to add this will not validate (if that matters to you).
    • Implementation requires JS; without JS, nothing happens.
    • Not all servers permit HTC files.

The Bottom-Line

I would say pure CSS (meaning IE filters) is always the way to go, but both IE Filters and CSS3 PIE will break validation, so, your call.

Leave a Reply

Your email address will not be published. Required fields are marked *