How to create slick effects with CSS3 box-shadow

by - 87 comments

Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop’s Blending options. But now, since CSS3 “hit the charts”, you don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box.

Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore.


View demo

box-shadow property

The box-shadow property allows you to add multiple shadows (outer or inner) on box elements. To do that you must specify values as: color, size, blur and offset.

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Rocket science?

Not at all, here’s an quick example:

box-shadow: 3px 3px 10px 5px #000;

This CSS declaration will generate the following shadow:

  • A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative
    length to the left.
  • The second length is the vertical offset. A positive value for the vertical offset basically offsets the
    shadow down, a negative one up.
  • You’re not allowed to use negative values for blur radius. The larger
    the value, the more the shadow’s edge is blurred, as it can be seen above.
  • Spread distance positive values cause the
    shadow shape to expand in all directions by the specified radius.
    Negative ones cause the shadow shape to contract.
  • The color is the color of the shadow.
  • The inset keyword (missing above), if present,
    changes the drop shadow from an outer shadow to an inner
    shadow

The above theory it’s just a small amount, if you want to read more, than be my guest and check the W3C specs.

Enough theory, let’s see some stuff!

Now let’s see how can you take advantage of this wonderful CSS3 feature. Below I’ll show you how to enhance your designs with the coolest box-shadow techniques!

Add depth to your body

Reference URL

	
body:before 
{ 
   content: "";
   position: fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 100;
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   }

Drop shadows

Here are the articles that inspired me, and not only:

#box 
{
  position: relative;
  width: 60%;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}


#box:before, #box:after 
{
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%; 
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7); 
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);   
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);    
  -moz-transform: rotate(-3deg);   
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

#box:after 
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

Quick tips

Try spicing up shadows with RGBa color. The box-shadow property can be used using CSS3 RGBa colors to create shadows with differing levels of opacity. If your browsers supports the box-shadow property, then it will definitively support the RGBa color mode.

Use multiple shadows in one CSS declaration:

  box-shadow: 3px 3px 10px 5px #000, 0 0 4px rgba(0, 0, 0, .5) inset;

Browser Support

  • Internet Explorer 9/10
  • Firefox (from 3.5)
  • Safari/Chrome
  • Opera (from 10.5)

View demo

Final words

You should start using these techniques today and I mean it. Why’s that? Because you can, as box-shadow will not break your layout on older browsers.

You might also like:

87 thoughts on “How to create slick effects with CSS3 box-shadow”

  1. Wow, it’s awesome.
    This is very much like the shadow we create in photoshop. Now there no need use the images for this type of shadow, CSS 3.0 is enough for this.
    Just one stopper is there to use this, I hope you are getting my point(this is IE…).
    Anyways thanks….!!

    Reply ↓

  3. I cannot see the blur in my navegator. Only the solid shapes. I’m using rekonq, it uses webkit for rendering :(

    Reply ↓

    • Hey Gene, fist of all thank you for sharing this box-shadow technique. I found it very cool and that’s why I decided to give it a try on my website. :)

      PS. Nice hr gradient technique!

      Reply ↓

  7. Hi! Very nice indeed!

    Is this thing be possible to implement in IE7-IE8?

    I really want to know coz I’m starting a project that requires this kind of shadowing.. And i don’t wanna use images.

    Thanks and regards

    Reply ↓

    • Edward, IE trident doesn’t support CSS3 box-shadow feature.

      But with some filter you can add simple drop shadows also for IE:

      filter: progid:DXImageTransform.Microsoft.Shadow(color='#777777', Direction=90, Strength=4);

      Yet, with IE filter, you can’t replicate the CSS3 effects presented in this article.

      Reply ↓

      • On your page the box comes with the nice shadows in IE, but on my page it’s just a simple grey box.

        This is a quite general question as well. Often when I see some nice css it works in IE on the original page, but when I try the same on my page it ruins the site.

        Reply ↓

  8. Great article!!

    but when I use this under anoter div that come with background. It’s not work!!

    eg.

    Lorem…

    Reply ↓

  9. Hi, It works fine on my divs but i have a little issue:
    In a site that i’m building I use this box-shadow on the div on the left (700px width) without problems.
    But the div #sidebar that contains 3 div .side have an issue.
    When i add the code at the .side class .side:before, .side:after and .side:after the shadow is displayed only at the bottom of last div.side and if I apply margin bottom at the div.side the box slide down.

    How can i resolve?
    Thanks in advance

    Reply ↓

    • Gimmy, I’m not sure what is the problem you encounter. If you still need help, feel free to send me an email using the contact page.

      Reply ↓

    • Hi, Gimmy, I’m not sure if you have fixed your problem, but I think is quite easy to solve….

      you use the same css code for large divs (700px width), and you should use another css code for smaller boxes… i think that you should use 2 different classes…

      in the big box case (700px) take alook inside the code to the “max-width:300px;” this attribute will render the nice shadow from left ro right(0 to 300), and from right to left (700px to 400px)… so my suggestion is that if your new box is something like 280px width, create another css attribute but change the “max-width:300px;” to something like max-width:130px; this will do the job :)

      Reply ↓

  18. Would someone be kind enough to give me some help, I am trying to use this as a header inside a container. When I place it inside the container, one of two things happens. 1) the container disappears or the box/header becomes mis-shaped. The way I have it now, it sits outside & below the container. This is my 1st post here so I don’t know if I’m allowed to post my code. Much appreciated if someone could help. Thank you !

    Reply ↓

  20. Thanks for your exciting tutorial and its result. I like it very much and I use it (by some modification) in my website to represent some information to user. I’m going to thank you again. It helps me a lot.

    Reply ↓

  21. As a little addition to the “body depth” piece (which is a lovely touch for any site I think). The following stretches the shadow so it touches the right and left window edges.

    body:before
    {
    content: “”;
    position: fixed;
    top: -10px;
    left: -10px; /* this */
    width: 110%; /* and this */
    height: 10px;
    z-index: 100;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    }

    :)

    Reply ↓

  22. can i have the box-shadow property for an image? i’d like to give that effect to a picture of a book, magazine, etc and make it look like it’s on a table…

    Reply ↓

    • Morgan, you can add box shadow to an image, but you can’t play with :before and :after pseudo-elements for an image. The img elements have no content, therefore, :before and :after will not render anything for the img elements.

      The solution is to place the img into an span or something else and begin styling.

      Good luck!

      Reply ↓

      • Thank you SOO much I have been searching around the web for the better part of the day to find this one, insignificant piece of information.

        Reply ↓

  26. Indeed nice work & my compliments!!
    Nice to see such work and I’ve even experimented with your tut.
    Good luck to see more work from you.
    Thanks & reg

    Reply ↓

  28. super fantastic, îmi place ideea ta, am integrat-o cu succes la pozele de pe site-ul meu, dar, un lucru nu reușesc să fac, să utilizez această metodă la un div class ce definește aspectul unui buton de tipul „<imput type="submit" class="ButonulCuUmbra"…” eventual să apară umbra la apelarea funcției „onmouseover”

    Reply ↓

  30. On really long pages, the tops of the shadows will be visible on the side. Any work around for that?

    Reply ↓

  31. Holy smokes man, this website is awesome. Thanks for emphasizing to your visitors and I the need for balancing form and functionality. Creating websites that not only look nice, but also are just as easy to navigate is seriously like poetry in motion. Lovin’ it!

    Reply ↓

  43. I created this example but i inserted in my website that shadow be not displayed what’s problem tell me plz

    Reply ↓

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=""> <strike> <strong>