The box-shadow property allows you to add drop shadows to objects on your page. It can also be used to create outer glows.

/* Box Shadow Example */
     -moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.5); /* FF3.5+ */
  -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5); /* Saf3.0+, Chrome */
          box-shadow: 3px 3px 6px rgba(0,0,0,0.5); /* Opera 10.5, IE9, Chrome 10+ */

/* Inner Shadow Example */
     -moz-box-shadow:inset 4px 2px 6px rgba(0,0,0,0.8); /* FF3.5+ */
  -webkit-box-shadow:inset 4px 2px 6px rgba(0,0,0,0.8); /* Saf3.0+, Chrome */
          box-shadow:inset 4px 2px 6px rgba(0,0,0,0.8); /* Opera 10.5, IE9, Chrome 10+ */

/* Outer Glow Example */
     -moz-box-shadow: 0px 0px 10px #000; /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 10px #000; /* Saf3.0+, Chrome */
          box-shadow: 0px 0px 10px #000; /* Opera 10.5, IE9, Chrome 10+ */


The parameters:

  • Horizontal Offset: Number of pixels to the right. Use a negative number to move shadow to the left.
  • Vertical Offset: Number of pixels below. Use a negative number to move the shadow up.
  • Blur Radius: Use a larger number for more blur, smaller for sharper
  • Color: Instead of using a black, you can use an RGBA value to allow some of the background color to come through.

I’m using some values that are larger than I normally use on a real site to make them more obvious. Smaller numbers usually give a more subtle shadow, which I normally prefer, but it depends on what you are going for in your design, of course.

Add the word inset after the property (box-shadow:inset)to show an inset shadow instead of a drop shadow, as seen in the second example. Using an offset value of 0 in one or both of the offset parameters will show the shadow on more than two sides. My example only is showing the shadow on two sides.

If you set the Horizontal and Vertical blur values are set to 0 you can create an outer glow instead of a drop-shadow. The third example shows this. On a dark background with lighter colors of shadows, this may be more obvious, or userful.

Internet Explorer

The box-shadow property works in IE9. However, the inset property does not work in IE9. I have read it will work in IE10, and hopefully that will be true. To make work in IE 8 and earlier use CSS3PIE. Note that the path to the PIE file may be different for your website. The inset property is not supported yet, however.

position: relative; /* only if necessary to make work */
behavior: url(/; 

5 thoughts on “Shadows

  1. Are you certain that an inset dropshadow works in IE9? Everywhere else I’ve been says it isn’t supported and I can’t get it to work.

  2. No, you are correct, the Inset Dropshadow doesn’t work in IE9. Regular drop-shadows do, but inset does not. I will update my post to be more clear. Thanks.

    1. Karan,

      Sorry for the late reply.

      I am pretty happy with the CSS3PIE solution, so I haven’t tried anything else. Are you having trouble getting it to work?

      ~ Lisa

Leave a Reply

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