Box Shadow Translator For IE

I have a box shadow written (Content .shadow) that works well in most all browsers except for IE. I found an article showing the -ms-filter and -filter add ons but I cannot figure out how to translate or convert the different properties. With the -filter properties, I don’t see that many options for blur, h-shadow, v-shadow, and spread. Does “strength” translate to “spread” and so on…?

.shadow {
-webkit-box-shadow: 0 -11px 22px -8px #777;
-moz-box-shadow: 0 -11px 22px -8px #777;
box-shadow: 0 -11px 22px -8px #777;

/* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=0, Color='#777777')";

/* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=0, Color='#777777');



Thanks in advance to anyone who can help me out here.

Did you look here?

Out of curiousity - Does your site have the marketshare to require you to support below IE8? Is it worth your effort for a drop shadow?

Dave, I did not look there but I will take a peek. Not sure about the marketshare requirement, but the client is using that specific browser; so that makes it important.

ugh. understandable why you’re supporting it but still - ugh.

Here’s another link you might find useful:

I use this:

The filter property tends to be a pain to work with.

I hardly write the code my own, usually I relied on CSS generators.

Box shadow tool: (IE7 and IE8 unsupported CSS3 element)

If above tool not working, you may try the alternative generators