Monthly Archives: April 2011


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(/; 

Embossed Text

Embossed text is similar to the engraved text effect, but the text appears higher than the surface, instead of lower. This can also be achieved with the CSS3 property text-shadow.

You can add this CSS to any selectors with text where you want this effect.

/* Darker text on medium background */
color: #333;
background-color: #666;
text-shadow: 0px -1px 0px rgba(255,255,255,.5); /* 50% white from top */

/* Medium text on lighter background */
color: #666;
background-color: #aaa;
text-shadow: 0px 1px 0px rgba(0,0,0,.5); /* 50% black coming from the bottom */

The main difference is the direction of the shadows. If the shadow comes from the bottom in an engraved effect, it will come from the top to emboss, using the same colors.

Personally, I find the inset or engraved text effect nicer looking. However, the specific colors that you use, may give different results, so experiment to get the best effect.