Cross-browser drop shadows using pure CSS

19^th July 2009, 15 comments, tagged with browsers, Internet Explorer, CSSLook ma, no images!

There’s an awful lot of noise at the moment regarding dropping IE6 and forging ahead with CSS3 properties for the finer touches on web layouts. Do websites need to look exactly the same in every browser?

One such example is adding drop shadows to content blocks. There are countless ways of achieving this, most requiring additional HTML markup and one or more PNG images. Not to mention hacks for IE6 to get render PNGs properly. All of this begins to degrade page performance, when really the drop shadow is merely a secondary design flourish.

CSS3 provides the box-shadow property to achieve just that. Thankfully Safari/Webkit has supported this for some time, and Firefox more recently with Firefox 3.5. Internet Explorer provides a DropShadow filter but this provides a hard-edged shadow unlike its CSS3 counterpart. By combining the Glow and Shadow filters however, we can achieve something that fairly closely resembles the rendered CSS3 shadow. Hurrah!

Here’s an example page and the result across major browsers:

Figure 1. CSS drop shadows rendered in major browsers Figure 1. CSS drop shadows rendered in major browsers

Disadvantages

no support in Opera or Firefox pre-3.5
filters may clash if you also need to set container opacity (e.g. fading using jQuery)
the shadows aren’t exactly the same

Advantages

no additional markup, images or IE6 hacking
faster performance than rendering images (especially IE6 PNG fix)
shadow changes can be tweaked using CSS
no restriction on size — shadow grows as the content grows

Update (19 July 2009, 17:47)

Figure 2. A cleaner IE6 version Figure 2. A cleaner IE6 version

As ZigPress points out in the comments the IE representation is still rather ugly.

By removing the Glow filter and using Shadow filters in its place, and reducing the weight of the shadow, we approach something more forgiving in Internet Explorer using the following CSS:

div {
    filter: 
        progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
        progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
        progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
        progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);
}

There have been 15 comments. Add yours »

Federico 19 July 2009 14:22

Good article Nick, but… In real world it is difficult to explain to client how it is supposed their site will change in different browsers.

By the way, It could be use in prototype’s site or admin panels.

Cheers, Federico

Andy Pearson 19 July 2009 14:25

Woah! Great looking example, this is certainly an interesting technique.

I am heading more and more towards progressive enhancement in my designs, providing IE6 is getting something good, I’m no longer paranoid about it being “perfect” and am instead letting my hair down in compliant browsers by taking advantage of all the new CSS3 goodness.

This is another great tool for the toolbox though, thanks!

Andrew Nesbitt 19 July 2009 14:41

I couldn’t agree more, as long as the design isn’t centered around drop shadows I’m all for graceful degredation (or progressive enhancement), it saves both development time and page weight/speed.

I’m starting to do the same with rounded corners using border-radius as well, now that firefox 3.5 is out.

ZigPress 19 July 2009 16:54

It’s too ugly in IE for me to use in real-world projects - those hard edges… but a great proof of concept nonetheless.

Nick 19 July 2009 17:39

Thanks for your comments gents. Granted, it doesn’t look as good and you’ll always have to make a call as to whether you can get away with it. On a white background perhaps the differences are too stark.

However on two recent projects every content block had a drop shadow on either a very dark or textured background. On this occasion this method could have been used since the effect is so subtle. At the time we went with PNGs.

I’m also beginning to use border-radius on content blocks and buttons, but these are far more obvious when not present in IE and so can’t always get away with it when a client has already signed-off a design.

@ZigPress — the ugliness is mostly due to the offset and the 90-degree angle bottom left. Since you can define the direction of the shadow, I could ditch the Glow completely and use four Shadows. See update above :-)

Federico 19 July 2009 19:14

You are right when you say that this effect can be used in dark background.

Very nice work and symphony implementation too.

clippingimages 07 October 2009 23:11

Well explained article. Creative idea. Thanks for sharing this nice post.

Ryan 11 November 2009 00:28

Too bad box-shadow has been removed from the CSS3 spec for further discussion. Opera is planning to add it in presto 2.3 but may remove it now that it’s not in the spec.

Andy 14 November 2009 16:35

Ryan, do you have a link about the removal?

ni_x 17 November 2009 12:27

what about Opera?

ZigPress 24 November 2009 15:16

Hey Nick, that’s a big improvement in IE6… well done for finding a solution.

Ryan 30 November 2009 00:19

It’s in the working draft spec http://www.w3.org/TR/css3-background/#the-box-shadow

This is the potential new specification for adding shadows to elements, much more precise http://www.bradclicks.com/cssplay/drop-shadow/Drop-Shadow.html

Josh 30 November 2009 06:18

Very nice setup. Easy to use and looks great in moz and webkit browsers. I’m still counting down the days when every browser has webkit included!

Jeroen 14 January 2010 18:47

I tried your method but fonts become too harsh (no antialiasing) with this filter in IE8. Too bad, since it’s a nice technique. Well, back to Firefox… :)

Markus 03 February 2010 00:23

I really like the new soft version for IE, made my day - thanks a lot for sharing :)