Fun With Box Shadows

In July 2008 Michael Ventnor implemented the CSS property box-shadow in Mozilla (as -moz-box-shadow, until the spec has stabilized). In this post I’d like to give a quick summary of how box shadows work. I’ve created a little demo page; all the shadows you see in this post are screenshots from that page. Use a recent nightly Firefox build to view it.

Overview

The most basic way of setting a box shadow on a box is using box-shadow: [x offset] [y offset] [color]:

box-shadow: 5px 3px black;

Adding another number lets you specify a blur radius:

box-shadow: 3px 3px 5px black;

You can even set a spread radius (this extends the shadow rect):

box-shadow: 0 0 5px 5px black;

Negative spread values are possible, too:

box-shadow: 0 5px 5px -3px black;

Another interesting feature is the ability to set multiple box shadows, separated by comma, starting with the topmost shadow:

box-shadow:
  0 0 20px black,
  20px 15px 30px yellow,
  -20px 15px 30px lime,
  -20px -15px 30px blue,
  20px -15px 30px red;

Shadow Opacity

What if you’d like the shadow to be more transparent? Just use the rgba syntax when setting the color and specify an appropriate alpha value:

box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);

Increasing the opacity of a shadow is slightly more tricky. First you should try playing with the spread radius, but if that doesn’t give the right results, duplicating the shadow layer works, too:

box-shadow: 3px 3px 5px black, 3px 3px 5px black;

Inset Box Shadows

Finally I’m getting to the reason I’m writing this blog post in the first place. Just over a week ago, Michael Ventnor added support for inset box shadows.

Using inset box shadows is as simple as adding the inset keyword to a box shadow layer.

box-shadow: inset 2px 2px 5px black;

Inset and outset shadows can be combined:

box-shadow: inset 2px 2px 5px black, 2px 2px 5px black;

Now the usefulness of multiple shadow layers becomes really apparent. You can use inset box shadows to create gradients, highlights, 3D borders etc. and freely stack them on top of each other. It’s just like using an unlimited number of “inner shadow” layer styles in Photoshop!

In combination with border-radius (which can even be elliptical in Firefox 3.5), the possibilities for creating shiny, image-less buttons are endless. For example, this is a recreated version of the button on getmiro.com:

The CSS code for buttons like this one can quickly become complicated, though… it’s all on the demo page, in case you’re interested.

More Examples

Recreating Cocoa controls with box shadow (and without any images) is fun, too:

Searchfields:
Aqua buttons:
“Recessed” Cocoa buttons:
“Round textured” Cocoa buttons:

Adapting To The Background Color

Inset box shadows are painted on top of the background layer. Black inset shadows make the background darker, white shadows make it lighter. If you keep that in mind, you can build box shadow constructs that can adapt to arbitrary backgrounds. I experimented a little and came up with super glossy boxes that look a little like Cocoa select boxes:

(See how the saturation is higher in the lower half of each box? :-) )

Browser Support

As far as I know, Webkit was the first engine to implement support for box shadows. A basic form has been supported since the version that Safari 3 ships with, and support for spread radii and inset box shadows was added in July 2009. Consequently, recent versions of Chrome can do all these things, too. In Webkit the property is called -webkit-box-shadow.

Firefox supports box shadows starting with version 3.5 under the name -moz-box-shadow.

Good news for Opera users: The recently released Opera 10.5 pre-alpha now supports box shadows, too! There are still some obvious bugs (e.g. box shadows with a zero blur radius sometimes aren’t painted), but I’m sure they’ll get fixed in time for the final release.
It’s interesting to note that Opera doesn’t use a vendor prefix in their box-shadow property name. Webkit also did this at some point but later re-introduced the -webkit- prefix since the box shadow section has been removed from the CSS 3 Backgrounds and Borders specification.

Notes

You should keep in mind that box shadows are rendered on the fly whenever your boxes are repainted. Some performance improvements have already been made, but drawing box shadows is still expensive. So if you value rendering speed and need shadows for large boxes (or shadows with large blur values), you should definitely consider using images of “pre-computed” shadows instead (for example as border-images).

Finally, I’d like to thank Michael for implementing this stuff in Firefox, and David Baron and Robert O’Callahan for reviewing his patches – thanks!

Update 2009-04-08: dbaron approved the inset box shadow patch for 1.9.1 after all, and today I landed it – that means we’ll get inset box shadows in Firefox 3.5! I’ve updated the article accordingly.

Update 2010-01-21: Updated the browser compatibility section since Webkit and the new Opera pre-alpha now support box-shadows.

About these ads

46 Comments »

  1. scott said

    good stuff :)

  2. smsmith said

    I hope you don’t mind, but I used one of your example buttons in a Stylish style for the bookmarks toolbar.

    http://userstyles.org/styles/17859

    Great stuff! Thanks for all your hard work!
    :D

  3. Of course I don’t mind – glad that it was helpful to you! :-)

  4. […] you can also define multiple shadows by defining several shadows, separated by commas (courtesy of Markus Stange): -moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px […]

  5. […] If you want, you can also define multiple shadows by defining several shadows, separated by commas (courtesy of Markus Stange): […]

  6. […] 如果你需要,你还可以定义多个阴影,使用逗号隔开(例子来自Markus Stange): […]

  7. Stefan said

    Firebug shows quite a strange behaviour when dealing with your glossy buttons ;-)
    Just try hovering over the code of one of the buttons in the Firebug window and watch how the margin is displayed. Strange.

    Anyway, great stuff!

  8. […] CSS text-gradient in Safari while Markus Stange has some fun with box shadows in his post “Fun with Box Shadows.” Markus produces some impressive effects for buttons in Firefox 3.5 and there is also some […]

  9. Justen said

    The bars look amazing in Firefox 3.5. I can’t wait to see this working in webkit, and I’m sad to know I’ll probably be senile before it shows up in IE.

  10. […] a pure CSS text-gradient in Safari and Markus Stange experiments with box shadows in “Fun with Box Shadows“. He manages to produce impressive effects in Firefox 3.5 and there is also some support of […]

  11. @Stefan: Indeed, that looks funny. Maybe Firebug is using DIVs to create those overlay boxes, which get styled by the box-shadow rules, too?

  12. jt said

    Tried duplication the same effects with -webkit-box-shadow. Looks like webkit’s box shadow does not support multiple shadow properties.

  13. […] Fun With Box Shadows – 非常好的 Firefox 实现阴影的教程,里面有许多很漂亮的实例,可以借鉴。 […]

  14. […] Fun With Box Shadows Tags: ajax, business, css, javascript, performance, rack, rails, ruby, tdd, testing, unix, webdesign, webserver Comment (RSS)  |  Trackback […]

  15. […] 如果你需要,你还可以定义多个阴影,使用逗号隔开(例子来自Markus Stange): […]

  16. freetao said

    great 。。。

  17. Opera 20.50 pre alpha does a good job of supporting box shadows — and without proprietory prefixes…

  18. Indeed! I’ll update the post.

  19. […] aardig overzicht van de dingen die je kunt doen met box-shadow? Check Fun with box shadows van Mark Stange.  CSS3 · […]

  20. Ned said

    Thanks for this. It’s a fairly confusing but immensely powerful property of CSS3. I’ve just implemented some of what you’ve shown here and have managed to give table rows a great sense of depth; style your s or s or even s with something like:

    box-shadow:inset 5px 10px 5px -10px black

    to give a nice shadow running along the top and only along the top; the ‘inset’ iteration of the feature isn’t quite as versatile as the standard exterior shadow.

  21. A.T.J. said

    Wonderful!!

  22. Codesquid said

    Great! CSS3 is very powerful, it’s fun it experiment, isn’t it!

  23. joebikerul said

    Thank’s

  24. That’s great !
    I Was thinking of Reworking my site with CSS 3 and blur effect :)
    Thanks.

  25. […] artikel vindt je hier […]

  26. […] https://developer.mozilla.org/en/CSS/-moz-box-shadow http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/ http://css.flepstudio.org/en/css3/box-shadow.html […]

  27. Your examples are brilliant! Thanks..

  28. […] Fun With Box Shadows: Eine Sammlung von Beispielen zu multiblen Shadow Angaben […]

  29. […] Fun With Box ShadowsThis articles illustrates dozens of nice examples of how box-shadow can be used to achieve various visual effects. […]

  30. […] Fun With Box Shadows This articles illustrates dozens of nice examples of how box-shadow can be used to achieve various visual effects. […]

  31. These bring such life to my site. Nothing like a good background!

  32. […] http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/ […]

  33. anyulled said

    Awesome!! thanls a lot for the demos!!

  34. […] shadows work with Firefox, Safari and Chrome. Here is a great tutorial with many more examples for box shadows. There are also several workarounds for Internet […]

  35. Very nice and heklpful overview, with a lot of interesting css3 features. Thx for sharing!

  36. Rizky Syazuli said

    btw, how does each box-shadow values corresponds to photoshop’s drop shadow settings?

    i mean, let’s say in photoshop i create button that has a drop shadow with 90deg angle, 4px distance, 0% spread and 3px size.. how do i recreate it using only css?

    so far the closest i get was using something like this..

    box-shadow: 0, 2px, 2px, 0, rgba(0,0,0,0.45);

    sorry, no screenshots.. i guess u guys should try it out urself :P
    anyway, does someone figure this out yet? i think we all could really use a reference on this..

  37. […] […]

  38. Taipan said

    I just wished IE would include this. It’s just a bummer IE does not want to cooperate.

  39. Actually, IE9 is going to support them, according to the table at http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx – great!

  40. […] bijzonder aardig overzicht van de dingen die je kunt doen met box-shadow? Check Fun with box shadows van Mark Stange — ook als je niet in het bezit bent van een Mac met Safari of niet surft met een […]

  41. […] definir múltiples sombras mediante la definición de varias sombras, separadas por comas (gracias aMarkus Strange): -moz-box-shadow: 0 0 20px black, yellow 20px 15px 30px, 20px 15px 30px-cal-20px-15px 30px blue, […]

  42. Muthu said

    Hi nice collection , I have seen shadow effect for IE in the following website., http://discoverweb.info/css-shadow-for-ie.html

  43. nice info ..
    thanks ..

  44. Clicklabs said

    Pretty cool Styles! I am using the searchfield focused as a Picture Shadow and it does look pretty cool! THX

  45. […] Fun With Box Shadows […]

  46. […] shadows work with Firefox, Safari, Chrome, Opera and IE9 Preview. Here is a great tutorial with many more examples for box shadows. There are also several workarounds for older versions of […]

RSS feed for comments on this post · TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: