CSS3 Drop Shadow

Sep 2, 2009 by Matt | Posted in Design 18 Comments

Have you ever wanted to add a drop shadow around an element, but didn’t want to mess around with extra background images just to pull off such a simple effect? Why not use a cutting edge CSS3 effect, which won’t work in Internet Explorer of course, but who cares…

I found this useful snippet, and thought it might be of interest.

-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;

The firs line adds the shadow in Mozilla browsers (e.g. Firefox), the second adds it in WebKit browsers such as Safari and Chrome, and the final one is for any browsers that already support the draft box-shadow property, such as Firefox 3.1+ and Safari 3+.

The first two attributes of each of the properties are the horizontal and vertical offsets for the shadow, the third is the blur radius, and the final one sets the color of the drop shadow.

  • http://www.dmxzone.com Patrick

    This can also be done in IE:
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135);

    • http://intensedebate.com/people/redwall_hp redwall_hp

      Well that's considerably…more difficult. :)

      • http://www.infinitymedia.ca Arron

        And it looks like pure garbage. try it it looks more like a 3d cube than any shadow effect. The CSS3 ones look nice though.

  • http://www.facebook.com/album.php?aid=95614&id=634251129&l=67684de631 cgfX

    All the codes worked well. The IE code was just as good if not better then the Firefox CSS3.

  • Pingback: links for 2010-06-10 « My Weblog

  • http://www.roofonfire.com xray

    IE code helps. I would just add ‘strength’ property. It doesn’t look that odd anymore if you, i.e. set filter up as:

    progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=4);

    Useful info thou, tnx

  • Pingback: Matthew Moore Design » CSS3: Making Things Pretty With No Images

  • http://www.heftelstudios.com Kawika

    How do I get a dropshadow around the text, without a stupid box effect?

  • http://www.roofonfire.com xray

    Only thing I could suggest is to have the background white. If someone have any other idea, I’m all ears:)

  • http://www.richardarran.com Richard Arran Landscape Photography

    I so wish we had full browser support for CSS3. Life would be so much easier.

  • http://augenreiz.de AUGENREIZ Internet-Agentur

    SOFT SHADOWS FOR THE INTERNET EXPLORER

    With IE8 still not capable of rendering proper soft shadows I did some tests with multiple IE-shadows. If you add eight (!) shadows to your image the result is not too bad. Even on pages with many images the rendering time doesn’t seem to be affected.

    The equivalent of “box-shadow: 0px 3px 9px #dddddd” is:

    filter:
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=1)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=45,strength=1)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=4)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=135,strength=4)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=7)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=225,strength=4)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=4)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=315,strength=1)

    Enjoy,
    Tyron Montgomery

  • http://www.acfb.org/ Tyron Rosenbalm

    I’d have to concur with you here. Which is not something I typically do! I love reading a post that will make people think. Also, thanks for allowing me to comment!

  • http://invitationonly Jeffrey

    ok I am MEGA green here but…I would love to be able to drop a shadow along the edges of my blog in BLOGGER..does this work for that? Where does the code go?

  • http://famousracecardriver.com/mat/index.php Don

    Hey, thanks for this excellent tip, I was wondering if regular ol’ CSS could do stuff like this, but not without using images and blah blah blah. I’m going to look into CSS3 tutorials now, that you’ve introduced me to a very simple, powerful procedure.

  • Kevin

    I tried all of the code you guys posted for a drop shadow on a photo and none of them work :(. What am I doing wrong?

  • Kevin

    ok n/m i got the first 1 to work but how do i get it work with no angle on it and a soft d.shadow around the whole photo instead of on the right side and bottom?

  • http://blog.aejay.com Aejay

    @ Kevin:

    Are you talking about the CSS3 styles in the post itself? If so, you could start by reading the whole damn post, instead of skipping details and then asking for those same details in the comments.

    “The first two attributes of each of the properties are the horizontal and vertical offsets for the shadow, the third is the blur radius, and the final one sets the color of the drop shadow.”

    So, your first two values would be 0 and 0, and the third value would depend on how blurred you want the image.

    If you’re talking about IE, just do it in CSS3 for now. IE<8 won't support it, but it's better than having to make special code to support old, crappy, legacy browsers. The more work you do to support those browsers, the more hits on the performance of those who use good browsers, and that's not fair.

  • Matt

    Thank you.