Shadows and CSS3

I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one.

I learned this technique from Dan Cederholm’s Handcrafted CSS book, so if you’re able I’d recommend just going out and grabbing that, as he explains it much more elegantly and thoroughly than I ever could.

Text-shadow

Applying text-shadow to elements is easy, and coupled with RGBA it works beautifully. Since both text-shadow and RGBA are supported by Safari, Firefox, Konqueror, and Opera, why not start playing with them now?

Text shadow is sexy.

If you’re using one of the aforementioned browsers, you should see a nice drop shadow on the text above. (If you’re not — why?) This drop shadow is created using the following code:

text-shadow: 1px 1px 1px rgba(0,0,0,.4);

Breaking it down

  • The first 1px indicates how much the shadow should be offset horizontally; in this case we’re telling the shadow to appear one pixel to the right. Using -1px would move the shadow one pixel to the left.
  • The second 1px indicates how much the shadow should be offset vertically; in this case we’re telling the shadow to appear one pixel lower than the text. Using -1px would move the shadow one pixel above the text.
  • The third 1px value tells the shadow how much it should blur. Using 0 for this value would create a solid drop shadow, which has a blocky, high-contrast effect. Using only this value (ex. text-shadow: 0 0 1px rgba(0,0,0,.4);) would create an outer glow.
  • rgba(0,0,0,.4); gives the shadow its color. In this case we’re using (0,0,0), which is the RGB value for black, and we’re giving that black an opacity of 40%, or .4.

Why use RGBA for the shadow color?

Using RGBA instead of a solid color for the shadow is great because it allows some of the page’s background color to bleed through. This means that the shadow will blend nicely with the page’s existing color scheme, and if you ever change up the site’s background color your shadows will change too. If you’re unclear about how rgba works, check out Drew McLellan’s 24ways article.

So now you should be able to implement text-shadow and RGBA in your designs. This technique is very powerful, as it can be used to make text jump off the page:

Text shadow is sexy.

or appear to be set into the page:

Text shadow is sexy.

Box shadow

Once you know how to use text-shadow + RGBA to achieve drop shadows, you’re well on your way to mastering box-shadow. The syntax is exactly the same, so box-shadow: 0 1px 10px rgba(0,0,0,.1); will create a black shadow at 10% that’s centered horizontally, one pixel down, with a ten pixel blur.

test image

Misty the one-toothed cat thinks box shadow is awesome.

Box shadow is supported in Safari and Firefox 3.5, but like border-radius it requires the use of vendor-specific properties. So assuming we wanted to add a drop shadow to an image in Safari and Firefox, here’s how we’d code it:

-webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
box-shadow: 0 1px 10px rgba(0,0,0,.1);

You’ll notice I included the standard box-shadow property; this is in place for future browsers who may one day support this property.

There you have it! Once again your shadow blends nicely with the background because you’re using RGBA, and creates a kick-ass 3-D effect with minimal markup.

Box-shadow and text-shadow may not be for every project, but since they’re so easy to implement and browser support for these features is growing, why not try them out?

I can hear some of you naysayers yelling about Internet Explorer, but really is it so bad if some users get to see shadows and some don’t? The design won’t be broken for IE people, they’re just missing out on a few visual treats that other users will see.

If you’re not sold on the argument that we should reward users who choose modern browsers, check out Dan’s Handcrafted CSS book, Aaron Gustafson’s A List Apart article and Andy Clarke’s multiple well written articles on the subject.

120 Responses

  1. Maddie says:

    Yay, I love this!! Thanks for sharing Meagan!

  2. Matt says:

    Your Cat Misty looks like a pirate… yarrr.
    And text shadow is sexy…

  3. Nice to see a writeup of how text-shadow exactly works. I’ve been using it for a while but haven’t known fully what each variable does.

    Thanks, Meagan :)

  4. Nice read… thanks for posting.

    “I can hear some of you naysayers yelling about Internet Explorer, but really is it so bad if some users get to see shadows and some don’t? The design won’t be broken for IE people, they’re just missing out on a few visual treats that other users will see.”

    Totally agree with this statement, it is time to move forward!

    ~ Aaron I

  5. Gedy says:

    Megan thanks so much for posting this. Awesome work!

  6. Jordan Little says:

    Great writeup. I’ve been sneaking more and more bits like this, as well as -webkit and -moz declarations, just to spruce things up for the more browser-savvy crowd.

    Thanks for the article. My favorite part was the part with the cat. In the middle there.

  7. kylegetsspam says:

    I’m a fan of graceful degradation using things like this. Forget IE users; just give the extra niceties to those with relevant browsers. WordPress’s admin area does a good job of this — rounded corners everywhere and lots of shadows too while IE users see squares and no shadows.

  8. John Stone says:

    Awesome stuff. I learn something new everyday!

  9. Paras G. says:

    Thank you for sharing this, Megan. Just last night I was messing around with gradients on Illustrator for use on a web page to give CSS-generated boxes drop-shadow like effects. Your tutorial gives me one more option. {:)

  10. Andrew says:

    Box-shadow has been dropped from the spec, so this probably won’t continue to work in it’s current form, unless it gets dropped back in.

    http://www.w3.org/TR/css3-background/#the-box-shadow

  11. Edgar Leijs says:

    Very detailed and crisp! Rock hard CSS3 hardrock!

  12. Dan says:

    The very thing that I’ve been looking for, thanks for setting out in simplicity for us all

  13. Great post! I was just recently browsing through your site as you were on the “40 Amazing Female Role Models for Web Designers” list, and today found this article from CSS Beauty News. Good work :)!

    Haven’t seen too many sites yet utilizing text-shadow but just yesterday I stumbled on http://analog.coop/, they use a subtle off-white text-shadow on all text (shadows are not in rgba but text colours are). Looks nice!

  14. Hafeyang says:

    Your blog is really beautiful!

  15. Mike Rouse says:

    That is pretty sweet, dude.

  16. andrew says:

    YEP! thanks for share skills! i got it now

  17. Siegfred says:

    Sweet, Thanks for posting this

  18. fsmedia says:

    I hope it will be supported by Microsoft soon

  19. Deepu Balan says:

    Really beautiful post… Thanks.

    -Deepu

  20. Bill H says:

    You can get the same effect in IE using filters:

    p{filter:progid:DXImageTransform.Microsoft.Shadow(color=’#000000′,direction=135,strength=2)}

    (adjust properties accordingly)

    There are performance issues so it’s not for every site but it could be useful to a client who demands it work in IE.

  21. Oli says:

    Thanks. But hey, I hope people won’t use it to often. I remember when Photoshop add the shadow feature for fonts. After that the whole web was overshadowed :-(

  22. Netpaths says:

    Thanks for the tip, I’m implementing this tonight. Bonus: works on the iPhone.

  23. Phil says:

    Great post! Can’t wait to try it out

  24. Andrew says:

    Great post Meagan. CSS3 ftw!

  25. Dan says:

    Wicked thank you, great post!

  26. RaphaelDDL says:

    Well explained. Thanks for sharing the info.

  27. Found your site through your 24 Ways article on “Making Your Mockup in Markup” – thanks so much for this informative article on these two “new” selectors – I now understand them and feel confident in using them in my work!

  28. Idil says:

    First of all I love love love your site, it’s so beautifully designed.

    Great post, you really explain text-shadow and box-shadow well. I am just getting in CSS3. Thank you.
    Idil

  29. Josh says:

    I realized the power of this a few weeks ago while writing a plugin for WordPress to get images from flickr. I wanted the images to have drop shadows, but when one user put the plugin on a site with a dark background the shadows were too light. Now I’ve started using RGBa for all the shadows that I need.

  30. devolute says:

    Thank you for bringing together two of my greatest loves: Owls and CSS3 tricks.

  31. Stacy says:

    Like another commenter, I also came across this post via your 24 Ways article on “Making Your Mockup in Markup”.

    Misty is one smart cat! Thank you for sharing how to make this happen. I cannot wait to try it out. And others have said it, and I will say it too… your website is quite lovely.

  32. Juergen says:

    all nice and well, but unless Microsoft finally develops a compliant browser all these techniques are only visible to a minority of page visitors. Worse: in IE8 you only see, instead of a nice text shadow, a badly rendered text with a jagged edge = not at all an attractive design for 60%+++ of all site visitors!

  33. Theo says:

    I use text and box shadow on my site.
    Do you know if there is any possibility to validate this ?

    Great post Cheers

  34. Adods says:

    Box-shadow and drop shadow are good, but how to make the shadow look like a glow.. outer glow.. like shadow in but it’s spread to every direction.. is that possible?

  35. Great one.. but IE not supporting

  36. Great post, using your css technique will greatly help reduce graphical effects used. It will be awesome when all browsers recognize it.

    Thanks for sharing and keep ‘em coming.

  37. Karthi says:

    Very nice work…thanks for sharing…

  38. Ganesh says:

    This is really good one.

  39. This is really good one.

  40. StaLker says:

    Shadows non IE :(

  41. I would say that your text shadows are sexy, but that’s because you’re being very subtle about them. I think that too much shadow is a bad thing. Hopefully CSS3 people will not resort to dark drop shadows behind everything. It’s all in the tiny details.

  42. Love it. IE users will come round eventually.

    This is a beautiful site.

  43. Abdul Wakeel says:

    http://www.islamabadid.com/listen_to_fm_radios_islamabad/fm_100_islamabad/

    I want to change the background of the above page

    Can any body help me

  44. Rory says:

    Text shadows ARE sexy! Lovely article introducing me to CSS3, thanks for showing me how it is done

  45. Alif says:

    Finally I found clear and step by step tutorial how to use shadows properties in css 3. thanks

  46. Andrew says:

    I don’t use shadows very often (I do software, not design), but when I do, I come here for reference. It happens to be exactly one year after this post was written, but I can’t remember a time when I didn’t use this as my reference for box- and text-shadow. Thanks.

  47. dxo says:

    It also works in Chrome. :)

  48. box-shadow also has an optional ‘spread radius’ value

  49. Me says:

    Text shadows is useful but only in places where you want an image to stand out that little bit more.As some one already pointed out too much shadow is a bad thing. With using CSS3 shadow people will have to sort out that detail them selfs. So taken that in to account Text shadow can be sexy at times.

  50. RayRogers says:

    Shadows and CSS3 works in Chrome but not as good I think.

  51. Rohit Mishra says:

    Thanks a lot for another great tutorial. This website has been my gateway to HTML 5 and CSS 3.

  52. I like the letter press ideas, I wanted to let you know I’ll be using it on my site!!

    - Aaron

  53. I will be using this effect when I get my site up and running. Thanks for this tutorial, never underestimate the power of CSS!
    -Joe

  54. I have been browsing online more than three hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my view, if all web owners and bloggers made good content as you did, the internet will be much more useful than ever before.

  55. Esp Bass says:

    Hello there, just became aware of your blog through Google, and found that it is really informative. I am gonna watch out for brussels. I will be grateful if you continue this in future. Numerous people will be benefited from your writing. Cheers!

  56. Oliver says:

    I agree. The cat is definitely stashing some pieces of eight!

  57. Thanks for the info, I have been helpful.

    PD: That cat’s a little scary xD

  58. DMC says:

    People who use IE hate the internet. Fact.

Leave a Reply

See more in the posts archive