Can I use CSS for drop shadows on my blog?

I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows. I love the appearance of having graphical elements appear to be just a tiny bit off “the page” and casting a slight shadow. Problem is, I don’t want to be stuck having to redo every single graphical element to add a drop shadow in PhotoShop. Is there a CSS way I can accomplish a drop shadow?

Until I started doing some research about what’s been added in CSS3, the latest version of the cascading style sheets that have done such a good job of improving the appearance of content, I would have said that you could jury-rig something with divs around divs, but it’d never really have that proper “fuzzy” drop-shadow look. And I’d have been wrong.
In fact, there’s a very nice new feature added in the latest version of CSS — and supported only in the latest versions of popular Web browsers — that lets you add a drop shadow to just about any container on the page, whether it’s a graphic or even a text box or other display container.
Depending on how über-compatible you want to be, it can also be something you slap inline on an IMG tag, DIV tag or similar, though making it a separate CSS class or ID allows you the space to have maximum compatibility.
Let’s start with the basics. Here’s an image:

Not too exciting, but a good test graphic. I’ve applied no CSS styles at all to the image, and it can definitely improve with a 1-pixel black border:

That’s done with the addition of style=”border:1px solid black;” to the IMG tag. But what if we want to add a drop shadow too? That’s done with another CSS attribute: box-shadow. Its attributes are a bit confusing, though, because they’re just a string of values, similar to the border CSS shortcut. Here’s what I’ll add:box-shadow: 5px 5px 7px #666
and here’s the terrific result:

In order, the values are the horizontal offset of the shadow, the vertical offset of the shadow, the blur or diffusion, and the base color. You can experiment with these values or learn more about other attributes to box-shadow.
What makes this really cool is that you can apply these box drop shadows to any CSS container, so I can use it for a text box:

This is a text container – a div – that has its grey drop shadow and pale pink background graphic both supplied by CSS attributes. Handy, quick, and something you can apply across quite a lot of elements if you have a shared CSS style sheet!

The style I’m using with the above text box is: style=”box-shadow: 5px 5px 10px #999;border:3px solid #060;padding:7px;background:#fee;font-size:125%;”
See what I’m doing there? “#999″ is medium grey, “#060″ is dark green and #fee” is light red.
If you separate value sequences with a comma, you can also specify more than one drop shadow box at the same time. Here’s one result that’s delightfully colorful:

This is a text container – a div – that has its grey drop shadow and pale pink background graphic both supplied by CSS attributes. Handy, quick, and something you can apply across quite a lot of elements if you have a shared CSS style sheet!

In this case, I’ve added two drop shadows, one yellow, one green, with the same statement by separating the value string with a comma:style=”box-shadow: 15px 15px 10px yellow, -15px -15px 10px #0c0;margin:25px;border:3px solid #060;padding:7px;background:#fee;font-size:125%;”
Notice I’ve also added a big margin — 25px all around — to ensure that there’s space allocated for the drop shadow. If you forget that, other content will appear over the shadow, which can be a cool effect but could also adversely affect readability.
That’s it for my examples. There are more complex ones on various CSS reference sites.
I hope that helps you see how you can indeed add drop shadows just using CSS.

Let’s Stay In Touch!

Never miss a single tutorial, review or article here on AskDaveTaylor, sign up for our fun weekly newsletter. It's the only way to get special content that's only shared via email too!
Name:
Email:

I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by
buying you a cup of coffee!

2 comments on “Can I use CSS for drop shadows on my blog?”

A further query: the box shadow doesn’t look good in the printed version of the page. As it’s a property, rather than an element, I don’t think I can use display: none. What do I put in my print style sheet to remove it? Thanks in advance for your help.

Thanks for this lovely bit of script. You say it works only in the latest versions of popular browsers and indeed I made it work in Firefox, but not in IE8. I’m using Windows XP in a virtual machine on a Mac, so I can’t get a later version of Explorer and presumably there’s nothing I can do about it, except hope that clients will have the latest thing (unlikely).

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. My lawyer says "Thanks".