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.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

123 thoughts on “Shadows and CSS3

  • Comment by Maddie
    December 14, 2009

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

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

  • 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 :)

  • 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

  • Comment by Gedy
    December 14, 2009

    Megan thanks so much for posting this. Awesome work!

  • Comment by Jordan Little
    December 14, 2009

    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.

  • Comment by kylegetsspam
    December 14, 2009

    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.

  • Comment by John Stone
    December 15, 2009

    Awesome stuff. I learn something new everyday!

  • 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. {:)

  • Comment by Andrew
    December 15, 2009

    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

  • Very detailed and crisp! Rock hard CSS3 hardrock!

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

  • 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!

  • Comment by Hafeyang
    December 17, 2009

    Your blog is really beautiful!

  • That is pretty sweet, dude.

  • YEP! thanks for share skills! i got it now

  • Comment by Siegfred
    December 19, 2009

    Sweet, Thanks for posting this

  • I hope it will be supported by Microsoft soon

  • Really beautiful post… Thanks.

    -Deepu

  • Comment by Bill H
    December 19, 2009

    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.

  • 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 :-(

  • Comment by Netpaths
    December 19, 2009

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

  • Great post! Can’t wait to try it out

  • Comment by Andrew
    December 20, 2009

    Great post Meagan. CSS3 ftw!

  • Wicked thank you, great post!

  • Well explained. Thanks for sharing the info.

  • 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!

  • 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

  • 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.

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

  • 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.

  • 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!

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

    Great post Cheers

  • oh god… i hate IE

  • Comment by Adods
    February 1, 2010

    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?

  • Great one.. but IE not supporting

  • 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.

  • Very nice work…thanks for sharing…

  • This is really good one.

  • This is really good one.

  • Comment by StaLker
    February 27, 2010

    Shadows non IE :(

  • 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.

  • good idea Thank

  • Love it. IE users will come round eventually.

    This is a beautiful site.

  • 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

  • Comment by Rory
    June 9, 2010

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

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

  • Comment by Andrew
    December 14, 2010

    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.

  • It also works in Chrome. :)

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

  • Comment by Me
    January 15, 2011

    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.

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

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

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

    – Aaron

  • 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

  • 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.

  • 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!

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

  • Thanks for the info, I have been helpful.

    PD: That cat’s a little scary xD

  • Comment by DMC
    December 22, 2011

    People who use IE hate the internet. Fact.

  • IE not supporting… :/

  • Great but won’t work for IE :(
    Isn’t there a solution for IE ?

  • Comment by Rahul
    March 8, 2015

    Great information on css3 :)