CSS 3: Box Shadow

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.

Box ShadowCSS