How to simulate css3 box shadow in ie7 8 without javascript

what is a box-shadow?

A box-shadow is equivalent to a CSS3 text-shadow except it is applied to the box of the block-level element instead of the actual text. Just like text-shadows, you can have one shadow:

#box {
  box-shadow:    ;
}

… three shadows:

#box {
  box-shadow: 1

> 1> 1>, 1>, 2> 2> 2>, 2>, 3> 3> 3>, 3>; }

… or as many as you want. The x- and y-offsets measure the position of the horizontal and vertical shadow respectively, and the blur-radius measures the amount of blur in the shadow. Let’s take a look at a simple example:

#box {
  box-shadow: 5px 5px 0px #ff0000;
}

Live HTML result	Firefox 4.0 Screenshot (for browsers like IE6-8 that can’t see the Live result)
This is an example of a simple box-shadow without blurring

Note that although box-shadow is the official property name, one must use the vendor-specific prefixes in order to use it in Webkit browsers (i.e. Chrome and Safari) as well as older versions of Firefox:

#box {
  box-shadow: 5px 5px 0px #ff0000,          /* Firefox 4.0+, Opera, IE 9 */
  -webkit-box-shadow: 5px 5px 0px #ff0000,  /* Chrome and Safari         */
  -moz-box-shadow: 5px 5px 0px #ff0000;     /* Firefox 3.6               */
}

Furthermore, there are two optional parameters, the spread (which allows you to determine the size of the shadow) as well as theinset parameter that can allow you to put the shadow inside the box instead of outside of the box. I direct readers toMozilla.org’s great reference for box-shadow to read more on these properties, since they are not, as far as I can tell, reproducible in IE 8 or lower.

What about IE?

IE9 has no problem showing box-shadow except when shadowing a box within a table-cell (If the CSS of the table has itsborder-collapse property set to collapse then the box-shadow is not applied. Hopefully this is fixed in a future release).

As mentioned earlier, IE6-8 requires Visual Filters to simulate CSS3 box-shadows without JavaScript. In order to illustrate this, I will show several different types of box-shadows below and show both the CSS3 syntax and the equivalent Visual Filter CSS recipe. Some of these recipes produce almost identical results, while others are rough equivalents. Note that all these examples use a variation of Paul Irish’s Conditional CSS Pattern in order to create the IE-only rules. This involves replacing the  tag of the document with this HTML:

We can then apply CSS specific to a version of IE. For example:

body.ie7 #box {
   /* insert IE7 specific CSS here */
}

(Note: Paul Irish’s technique officially has the conditional comments around the html tag, not the body tag. You can use either for these techniques to work. I just prefer using the latter.)

All these Visual Filter recipes depend on the box “having layout”. If you have any difficulty with the Visual Filters activating, setzoom: 1 or a static width inside the IE6-8 specific CSS to force the block to have layout.

Type #1: Simple, Unblurred Shadows

In order to simulate simple, unblurred box-shadows in IE, we use IE’s DropShadow Visual filter:

#box {
  /* CSS for all browsers. */
  border: solid 1px #808080;
  background: #ffffcc;
  margin: 10px;
  padding: 10px;

  /* CSS3 Box-shadow code: */
  box-shadow: 5px 5px 0px #ff0000;
  -webkit-box-shadow: 5px 5px 0px #ff0000;
  -moz-box-shadow: 5px 5px 0px #ff0000;
}

/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a simple box-shadow without blurringthat also works in IE6-8.

There are two exceptions to this solution. The first deals with when the block has a transparent background, and the other has to do with negative box-shadow offsets.

Type #1a: Blocks With Transparent Backgrounds

Let’s say you use the above CSS, but omit the background property:

#box {
  /* CSS for all browsers.  Note there is no background-color, so box will be transparent */
  border: solid 1px #808080;
  margin: 10px;
  padding: 10px;

  /* CSS3 Box-shadow code: */
  box-shadow: 5px 5px 0px #ff0000;
  -webkit-box-shadow: 5px 5px 0px #ff0000;
  -moz-box-shadow: 5px 5px 0px #ff0000;
}

/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}

Doing this will results in some unexpected results in IE6-8:

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a box with a transparent background and simple box-shadow without blurring. IE6-8 is having a hard time dealing with the transparent background.

The results in IE7 are as hideous and unreadable as the average YTMND page! In order to fix this issue in elderly IE, one must add a background color in IE6-8 only and remove it with the Chroma filter (more information on this technique can be found on my previous blog post, How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together).

#box {
  border: solid 1px #808080;
  margin: 10px;
  padding: 10px;

  /* Box-shadow code: */
  box-shadow: 5px 5px 0px #ff0000;
  -webkit-box-shadow: 5px 5px 0px #ff0000;
  -moz-box-shadow: 5px 5px 0px #ff0000;
}

body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   background-color: #ffffff;
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000),
           progid:DXImageTransform.Microsoft.Chroma(Color='#ffffff');
}

As you can see below, adding this CSS logic produces much better results:

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a box with a transparent background and simple box-shadow without blurring, with a fix for IE6-8 to deal with the transparent color.

Note: All the other types of box-shadow recipes that follow should also use this Chroma filter method when it is desirable to have a transparent background in the box itself.

Type 1b: Negative Shadow Offsets

If there are negative shadow offsets, you will see a small difference with the position of the box being shadowed:

#box {
  /* CSS for all browsers. */
  border: solid 1px #808080;
  background: #ffffcc;
  margin: 10px;
  padding: 10px;

  /* CSS3 Box-shadow code: */
  box-shadow: -10px