Enable CSS box-shadow for IE

This page shows how to enable CSS RGBA color and box-shadow for Internet Explorer 8 and lower versions by using the IE-only none-standard filter property. You may stop reading now if you don't care about how to implement css box-shadow effect in IE8 and earlier versions.

Note that you must use an Internet Explorer 8 or lower version to see the styles in effect.

Share

Hedger Wang / 2010.

Translucent (rgba) background color.

You can do this by using the gradient filter then specify the proper RGBA color value.

The RGBA Color is expressed in #AARRGGBB (Alpha component) format, where AA is the alpha hexadecimal value, RR is the red hexadecimal value, GG is the green hexadecimal value, and BB is the blue hexadecimal value. The alpha value controls the opacity of the object. An alpha value of 00 is transparent, while a value of FF is opaque.

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000);

Translucent (rgba) shadow color.

Simlilarily, you can do this with the dropshadow filter.

Note that the shadow color can be RGAB format (#AARRGGBB).

filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=10, Color='#33000000');

Muliple shadow filters applied

You may apply muliple filters to do something fancy.

filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=10, Color='#19000000'), progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=20, Color='#19000000'), progid:DXImageTransform.Microsoft.dropshadow(OffX=20, OffY=30, Color='#19000000'), progid:DXImageTransform.Microsoft.dropshadow(OffX=30, OffY=40, Color='#19000000');

CSS3-like shadow style.

Alternatively, if you want to have a nice-looking CSS3-like shadow, you should use the shadow filter instead to get a smooter shadow.

filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=10);

Still not pretty enough, right? Let's do it with multiple shadows for all directions.

filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2);

IE9 support?

Since IE9 should support both RGBA and box-shadow, we don't want IE9 to render these filters at all.

Because I don't have a stable IE9 for testing yet, I'm not sure whether IE9 will keep support these filters though the latest beta preview of IE9 showed that it still support the CSS "filter:" property. If IE9 does support these filters in its final release, we sould disable the manually by doing this.

 
  <style>
  .box-shadow {
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5);
  }
 
  /*
   * :last-child is the CSS3 selector that is not supported by IE8 and
   * lower versions.
   */
  body:last-child .box-shadow {
    filter: none;
  }
 
  </style>
  

Cross-browser syntax

Preview the code rendered in the iframe window below.

Other known issues