CSS 3: Box Shadow

/ CSS / by Paul Robinson / 13 Comments
This post was published back on May 9, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

At some point you have probably been working on a website & wished it was possible to create shadows on elements rather than having to rely on Photoshop & an image or some complicated background images all joined together. If you haven’t, lucky you. However, for all those that have, it seems our prayers have been answered by the Box Shadow property. Let’s take a look at it.

Note: As in the previous CSS 3 tutorials you will need a compatible browser to view the examples. Firefox, Safari, Google Chrome, Opera. IE9 does not yet support box shadow in the current preview, but should soon.

Box Shadow: The Syntax

Box Shadow’s syntax is exactly the same as Text Shadow’s. No really, it is:

Let’s look at an example:

This will produce:

The thing to remember is that like most of the other CSS 3 properties, support is browser based. You will therefore need to use browser prefixes to make Box Shadow work. The prefixes are:

  • -moz- is Mozilla based browsers (Firefox)
  • -webkit- is Webkit based browsers (Chrome, Safari)
  • There is no prefix needed for the Opera browser (untested by me)
  • There may be no prefix need for Internet Explorer 9 when it is supported (untested by me)

Once support is standardized across all browsers & the CSS 3 specification is finalized, support for box-shadow without the prefixes should be available across all modern browsers.

Box Shadow: The Effects

Let’s take a look at some of the effects that can be achieved using the Box Shadow property. In these examples I will just write box-shadow, however they will not work in reality if you do not prefix them with the browser prefixes mentioned previously.

Hard Shadow

The classic hard edged shadow:

Here is what it looks like:

Soft Shadow

The classic soft edged shadow:

Here is what it looks like:

Box Blur

A box blur effect:

Here is what it looks like:

Box Shadow: Graceful Degradation Tips

Again like most of the others there isn’t really a way to deal with degradation of Box Shadows. I guess the best way is to make sure that your website’s design looks okay without the shadows. Another way to deal with degradation I have seen employed recently is to show some form of dismissible notice informing users they are using an out of date browser. It is then their choice to either upgrade, or dismiss the message & continue browsing.

Box Shadow: Conclusions

The Box Shadow property, is without doubt, a very powerful tool to create effects that would normally be created using images. The good thing about that? No more waiting for all those PNG based background images to load means page loading speeds up, a lot.

The bad things? Well while it has support in all the major modern browsers, IE 6/7/8 all have no support for the Box Shadow property. In my opinion though, until we start using them there will be no reason for those using older browsers to upgrade (other than for security issues). Once they realize they are missing out on half of the websites they are visiting I’m sure they’ll be more inclined to upgrade.

As always thank you for reading, and I hope this walk through the Box Shadow property has been helpful. If you have any questions let me know via the comments. You can also follow me on Twitter or you can join our brand new Facebook page.


Author’s gravatar

I just learned at least three new facts from this post.

I didn’t even understand the point of the CSS3 browser codes (i.e. -ms-, -webkit-) before. I was just copying/pasting and hoping for the best:)


Author’s gravatar author

Thanks Jason.

Thought this might be useful. There is a little bit of debate around sites as to whether the Opera prefix is -o- or not. I do know that one or two of the rules don’t use a prefix when used in Opera, like Border Radius (I think).

Author’s gravatar

Good post Paul!

I was just introduced to box-shadow in the WordPress 3.0 beta. It’s used in the new Twenty Ten default WordPress theme.

Author’s gravatar author

Thanks Tyler. 😉

Unfortunately I haven’t had much time to play around with the new WP beta as of late, so I hadn’t realized it was used in Twenty Ten.

I think it’s a great idea to include new CSS properties in widely used apps such as WordPress though.

I believe that it helps users who don’t upgrade their browsers often enough realize that the web won’t wait for them & it’s their choice to miss out on the new features.

Author’s gravatar

Opera does not use the -o prefix for this CSS property as of Opera 10.10 upwards.

I would be glad if you would update the post and the respective CSS, because the shadow does not show up when viewed in the browser.

Also I would recommend that whenever you use any of the CSS3 properties, you would include the default non-prefixed version, in order to future proof the site, since all the browsers will remove the prefixes at some point.

IE9 does not support the Box Shadow property in the current preview releases (P2), but they don’t prefix border-radius so I doubt they might prefix Box Shadow if it appears in the final

Author’s gravatar author

I’ve updated the post for Opera. I’d actually done it a few days ago, but WordPress didn’t update the post properly. It even had the auto save with the changes, go figure.

I would always recommend using the non-prefixed versions too, hence why I have them in my CSS rules and explain to add your browser prefixed versions.

I hadn’t realized that IE9 does not yet support Box Shadow, I found the info on another site & was unable to check it at the time. Thanks for letting me know about that.

Again thanks for your input, it’s always helpful.

Author’s gravatar

Why wont this work in IE9? The syntax is right and I double checked this is CSS schools and it works fine my browser (IE9) however doesn’t

Author’s gravatar author

Hi Freddy,

They seem to work fine for me in IE9 (http://twitpic.com/6ytmpd/full). I’m not sure why it won’t work. The only thing I can think of is have you set the development mode to IE8 or IE7 and not changed it back? Try hitting F12 to bring up the development window & see if Internet Explorer 9 is written in it’s top bar.

Author’s gravatar

Thanks Paul at least I did see the change when I changed the Document Mode however I don’t see it outside of that here is my code:

Author’s gravatar

I pasted it here

Author’s gravatar author

Other than the fact you are missing the experimental browser variants for those browsers that don’t yet use the CSS standard, there doesn’t seem to be anything wrong with your code.

Your document mode should be on IE9 or it definitely won’t show as support was only added for box shadow in Internet Explorer 9.

Older Comments
Newer Comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more