Internet Explorer - CSS Shadow All Around

Question

I have been ripping my hair out over this issue, I want a simple shadow that does around the whole element, besides for the top. I got it to work in Firefox and Chrome with no problem. But IE has this weird "direction" setting where as the other as 4 numbers to define the shadow.

Can someone help me define the right CSS so that it will have a shadow around the whole element besides the top.

/* For Firefox and Chrome */
-moz-box-shadow: 0px 0px 7px #000;
-webkit-box-shadow: 0px 0px 7px #000;
 box-shadow: 0px 0px 7px #000;

 /* for IE */
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=600, Color='#000000')";

+1 for ripping your hair out over this issue I did the same :d — Jack, May 05 '12 at 07:12

score 24 · Accepted Answer · answered Oct 20 '11 at 19:24

The shadow filter is unidirectional, and direction is a number between 1 and 360 degrees. To generate a box shadow with the ability to offset that shadow, you'll need use multiple shadow filters:

   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
     progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
     progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
     progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);

This is sorted top/right/bottom/left, and varying the strength on any one side will alter the size of that shadow. For example, 2 5 5 10 will produce a straight-down drop shadow that gives the illusion of height.

+1 works like a charm, I goggled this and everything i got was not working, Tried this and it worked :) — Jack, May 05 '12 at 07:12
For the record, @timothy-perez's answer [below](http://stackoverflow.com/a/12684880/1005913) is a more complete version of mine - I wasn't aware of the inheritance issue. <3 IE. — egid, May 15 '13 at 22:28

score 8 · Answer 2 · answered Oct 02 '12 at 05:14

Similar to Above Answer (See Note Below):

#boxContainer{ 
   filter:
        progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color='#000000'),
        progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#000000'),
        progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#000000'),
        progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=270, Color='#000000');
}

Important: Keep in mind there's also a bug in IE where it will apply that same style to child elements. So you may need to apply a "counter"/"Nullifier" if you will.

Example:

#boxContainer button, #boxContainer div, #boxContainer span {
  /* Nullify Inherited Effect - Set "Strength=0" */
  filter:
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=0, Color='#000000'),
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=90, Color='#000000'),
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=180, Color='#000000'),
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=270, Color='#000000');
}

score 5 · Answer 3 · answered Oct 20 '11 at 19:17

5

Try the "glow" filter instead:

http://msdn.microsoft.com/en-us/library/ms532995(v=VS.85).aspx

 DIV.aFilter {
    filter:progid:DXImageTransform.Microsoft.Glow(Color=blue,Strength=5);
    width: 150px;}

answered Oct 20 '11 at 19:17

Diodeus - James MacFarlane

112,730
33
157
176

1

The look of this rendered out can only be described as "crunchy" looking. – Timothy Perez Oct 02 '12 at 05:17

score 0 · Answer 4 · answered Aug 11 '16 at 11:48

there are solutions here: http://www.artlebedev.com/tools/technogrette/html/filters-in-ie/ combining the glow and blur filters which look significantly better, to quote one of the code samples on the page above:

.shadowed .shadow-3
{
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)
progid:DXImageTransform.Microsoft.Alpha(opacity=25)
progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true');
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)"
"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"
"progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true')";
color: #111111;
top: -2px;
left: -2px;
}

Internet Explorer - CSS Shadow All Around

4 Answers4

Linked