Mar
01
2010

Creating Shadows with CSS3

by   |  Posted in Tutorials  |  33 comments

CSS3 has introduced some cool effects that give you control over elements of design that were once only possible using images. One of the new effects I have been having a lot of fun with lately is the box shadow. Many, if not all, of the new CSS3 effects only work on Safari 4, Firefox 3.5 and Google Chrome. Just one more reason to make sure to use one of those browsers.

It is easy to create a shadow effect with CSS3 by using the box-shadow style. There are six variables which the style accepts.

Inset
Creates a shadow on the inside of the element instead of on the outside.

Horizontal length
The amount of positive or negative space on the X axis between the shadow and the main element.

Vertical length
The amount of positive or negative space on the Y axis between the shadow and the main element.

Blur radius
The amount of blur on the shadow. Minimum of zero.

Spread radius
The amount of spread defines a larger or smaller shadow.

Color
The color of the shadow.

Basic example:

box-shadow: 6px 6px 12px #000000;
-webkit-box-shadow: 6px 6px 12px #000000;
-moz-box-shadow: 6px 6px 12px #000000;

Demo:

This is an example of the new box shadow style in CSS3.

 

The color variable accepts a hex code (#000000), name (black) or rgb code(0,0,0). It also accepts rgba, which allows for an alpha channel. Using rgba gives you the ability to add opacity to your shadow to soften it and let the background color through.

Example with alpha transparency:

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

Demo:

This is an example of the new box shadow style in CSS3 using rgba for the color variable.

 
Creating an inner shadow requires the inset variable.

Inset example:

box-shadow: inset 1px 1px 10px #111111;
-webkit-box-shadow: inset 1px 1px 10px #111111;
-moz-box-shadow: inset 1px 1px 10px #111111;

Demo:

This is an example of the new box shadow style in CSS3 using the inset variable.

 
You can easily set whether you want the shadow to larger or smaller that your main element by adding an amount to the spread variable.

Spread example:

box-shadow: 0px 16px 10px -10px #444444;
-webkit-box-shadow: 0px 16px 10px -10px #444444;
-moz-box-shadow: 0px 16px 10px -10px #444444;

Demo:

This is an example of the new box shadow style in CSS3 using a spread amount.

 
There are tons of possibilities and if you really want to go crazy you can define multiple shadows. Just separate them all by commas.

Multiple shadows example:

box-shadow: 0 0 20px #e15f5f, 10px 12px 20px #5fb3e1, -10px 12px 20px #5fe168, -10px -12px 20px #e1dc5f, 10px -12px 20px #e15fcd;
-webkit-box-shadow: 0 0 20px #e15f5f, 10px 12px 20px #5fb3e1, -10px 12px 20px #5fe168, -10px -12px 20px #e1dc5f, 10px -12px 20px #e15fcd;
-moz-box-shadow: 0 0 20px #e15f5f, 10px 12px 20px #5fb3e1, -10px 12px 20px #5fe168, -10px -12px 20px #e1dc5f, 10px -12px 20px #e15fcd;

Demo:

This is an example of the new box shadow style in CSS3 with multiple shadows defined.

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
Share the love...

Tags: , , , , , , , , , , , , , ,

Short URL: http://bit.ly/9yKhXB

Discussion 33 Comments

Newer Comments →
  1. David on March 1, 2010 at 9:01 pm

    Is there anyway that this could be placed in a post – for example, make a button appear on the toolbar in the edit post page so that you could get this effect to highlight or use instead of quotes? Very cool stuff.

  2. sadhana on April 3, 2010 at 12:34 am

    gr8

  3. eRage webdesign on May 11, 2010 at 5:27 am

    Good tutorials! I’m using this technique lotsa times now. Works on every browser, except the IE branch.

    If you want to use drop-shadows for IE, I suggest using

    -ms-filter: “progid:DXImageTransform.Microsoft.Shadow(color=#444444,direction=180,strength=6)” } (for IE8)

    and

    filter: progid:DXImageTransform.Microsoft.Shadow(color=#444444,direction=180,strength=6);

    for example. Works pretty good. Got more CSS3 tutorials coming up, by the way?

    • Tarot on December 10, 2010 at 8:57 am

      Thank you for the tip.

  4. webdesign on August 6, 2010 at 7:11 pm

    Stunning! Nice to use on dropdown menu’s imo :-)

  5. Webdesign bureau kiezen on August 31, 2010 at 5:49 am

    Very Nice to use on dropdown menu’s….

  6. Hotel Scheveningen on October 6, 2010 at 12:17 pm

    Great! Dont have to use Photoshop anymore :P

  7. manvir on October 30, 2010 at 6:52 am

    thanx a lot dear, it’s very helpful ,tnhx again

  8. Kantoormeubelen on November 7, 2010 at 4:43 am

    Excellent tutorial, thanks a lot! For those who are still stuck with the job of supplementing IE6-8 with those shadows: start using CSS3 PIE! Look at http://www.css3pie.com for some examples. It’s a HTC file with which you can use CSS3 effects in older IE browsers. Works like a charm!

  9. Alicia on November 11, 2010 at 2:50 am

    Thanks! This tutorial is very useful for my next website :)

  10. Carlton beach hotel Scheveningen on November 12, 2010 at 8:44 am

    Is it also possible to create an shadow in a image?

    • c.bavota on November 14, 2010 at 2:34 pm

      Not with CSS. You would have to use Photoshop or something similar to edit your image.

  11. Aankomsttijden Schiphol on December 6, 2010 at 7:29 pm

    I am really impressed with this techniques…

  12. Garage Door Repair Sacramento on December 7, 2010 at 6:27 pm

    Very nice article. I love CSS. I still remember how amazed I was the first time I learned it (years ago). You know what’s sad? To this day, when I use shortcuts like “box-shadow: 0px 16px 10px -10px” I still have to take my time to remember which is top, right, bottom, and left. Even that comment made me have to double check. lol

  13. Joanna Shirley on December 15, 2010 at 11:16 am

    Wow! these are really nice effects. I am learning CSS now and it is really easy to web design with CSS.

  14. Amy on December 28, 2010 at 5:01 pm

    I am currently breaking my teeth teaching myself CSS, and I really appreciate these valuable tips. Shadows do add a nice touch!

  15. StacyBride on January 10, 2011 at 4:14 am

    Is CSS3 supported by all modern browsers?

    • c.bavota on January 10, 2011 at 12:20 pm

      All except IE. Not too sure about IE 9 though, since it hasn’t been released.

  16. erd on January 13, 2011 at 4:41 am

    Very nice effect, is there a solution for ie? as this is the browser most used it would be nice to use this effect and be sure your visitors can see it?

  17. vansschoenen.net on January 15, 2011 at 8:31 am

    I like this new techniques!

  18. Reise Fans on January 15, 2011 at 10:16 am

    Good tutorials! – Just made my first shadow and I’m really happy that it worked

  19. hypotheekakte on January 21, 2011 at 11:02 am

    Looks good and it is very effective.

    thank you for the new insight.

  20. aankomsttijdenschiphol.com on February 11, 2011 at 5:57 am

    Is this technique only possible with rectangles? Or also for rounded rectangle? Cheers.

    • c.bavota on February 11, 2011 at 8:30 am

      It works with rounded corners as well.

  21. Badkamertegels on March 14, 2011 at 10:38 am

    Thanks for the post and tutorial. Like unlimited shadow options!

  22. Werbung Netz on March 21, 2011 at 4:17 pm

    My new WordPress Theme with this solution started next Time. Thanks for the creative Posting.

  23. schiphol on March 26, 2011 at 2:15 pm

    I read somewhere that not all browsers will support CSS3, what do you think of this?

    • c.bavota on March 28, 2011 at 10:58 am

      Of course, older browsers will never support CSS3. I have yet to test IE9 so I don’t know how much it supports.

  24. answers on April 14, 2011 at 7:20 am

    thanks for this stunning tutorial.. this is nice..

  25. Vertrektijden on May 18, 2011 at 2:23 pm

    I have tested IE9, it is supported better than expected.

Newer Comments →