CSS Shadows all four sides of div

Question

I want to achieve this in CSS - not CSS3 as I want it to be supported by all browsers

ie a div containing content, with the shadows on every side. The top area will be used for navigation. I have searched for tutorials but so far to no avail. Help!

sad, but IE do not display shadows made with CSS. You need to create images as shadows (some gifs, IE6 do not display alpha channel of png files) — Ventus, Aug 12 '10 at 12:15
Is this a dynamic box... meaning will the width/height every change depending on content? — Hristo, Aug 12 '10 at 13:20
For Cross Browser Compatibility drop shadows using only CSS...check these links out
http://dev.opera.com/articles/view/cross-browser-box-shadows/
http://coolhomepages.com/How-to-make-easy-gradient-shadow-CSS-DIV-boxes/blog-48.html — Lemdor, Oct 14 '12 at 09:58

vkGunasekaran · Answer 1 · 2013-01-10T10:18:02.100

Box Shadow works in all mordern [IE>8] browsers, This code uses no images and works in all browsers in IE versions below 9.

 box-shadow:2px 2px 10px 10px #C9C9C9;
 -webkit-box-shadow:2px 2px 10px 10px #C9C9C9;
 -moz-box-shadow:2px 2px 10px 10px #C9C9C9;

  /* For IE<9 */  
  filter:
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=0,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=45,strength=2),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=90,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=135,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=180,strength=10),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=225,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=270,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=315,strength=2);

Box shadow supported from IE 9 onwards.

@certainlyakey Thanks for pointing out, i've updated styles to make it work in IE. — vkGunasekaran, Jan 10 '13 at 10:19
Only the last filter was applying for me. To get all sides to work for me in IE8, I had to remove the commas. According to the following article from MSDN, they are separated by a space, not a comma: http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx — knighter, Mar 09 '15 at 20:59

score 4 · Answer 2 · answered Aug 12 '10 at 12:30

CSS3pie is a tool that lets you use some css3 properties in IE.

What you're trying to do is fairly widespread css3 in newer browsers, and emulated really well (and easily) in IE with the .htc file you can download from there.

As for the markup, I see just 2 elements, with the top one floated right, for example. You'd have to play with z-index to hide excess shadows. In that site there's also a very similar effect, you should be able to adapt it for your needs.

good reference. I have used it before some months, but for some reasons I left it. Thanks you remind it! — Sotiris, Aug 12 '10 at 13:45

score 3 · Answer 3 · answered Aug 03 '11 at 00:27

This should work in all browsers:


    .allSidesShadow {
        box-shadow: 2px 2px 19px #aaa;
        -o-box-shadow: 2px 2px 19px #aaa;
        -webkit-box-shadow: 2px 2px 19px #aaa;
        -moz-box-shadow: 2px 2px 19px #aaa;

        /* For IE 5.5 - 7 */
        /* for IE4 - IE7 */
        filter:
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4);
        -ms-filter: "
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4)
        ";
    }

score 1 · Answer 4 · edited Oct 10 '12 at 20:13

1

The answer posted by Sekar, needs a little editing,

box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;

this doesnot work on IE(I checked on IE8).

edited Oct 10 '12 at 20:13

andrewsi

10,807
132
35
51

answered Jul 20 '12 at 06:08

Prabhat Ranjan

400
3
17

score 1 · Answer 5 · answered Aug 14 '14 at 18:38

1

box-shadow: inset 0 0 3px 0 #000;

Means 0 pixel left, 0 pixel right, 3px blur, 0 pixel diffuse, use a color slightly darker than the BGs.

answered Aug 14 '14 at 18:38

yPhil

8,049
4
57
83

score 1 · Answer 6 · answered Sep 20 '14 at 13:26

1

I cant see your picture now, but for all side shadows I use the below code:

box-shadow: 0 0 5px 0 #000;

Instead of the 5px use your size.

answered Sep 20 '14 at 13:26

ravish.hacker

1,189
14
21

score 1 · Accepted Answer · answered Aug 12 '10 at 12:48

1

As Ventus said is not possible to use css shadows with ie (only ie9). But you can use shadowOn. It's a great jquery plugin and very easy in use. With it you will have cross browser compatibility.

answered Aug 12 '10 at 12:48

Sotiris

38,986
11
53
85

score 0 · Answer 8 · answered Oct 03 '15 at 08:39

0

You can place the following code in the div in order to drop shadows on all four sides.

-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);

answered Oct 03 '15 at 08:39

Ronald P Mathews

2,178
1
22
26

score 0 · Answer 9 · answered Aug 12 '10 at 12:13

0

You have to create several images. One for the left side. One for the right. One for the bottom, etc. And then have several div's and set the background for each of them.

answered Aug 12 '10 at 12:13

Knarf

1,282
3
12
31

score 0 · Answer 10 · answered Aug 12 '10 at 12:20

You can do this with three divs, assuming they are all the same (fixed) width:

<div class='top'>
</div>
<div class='middle'>
<p>Hello World!</p>
</div>
<div class='bottom'>
</div>

.top{
  background:url('top.png');
  height:20px;
  width:800px;
}
.middle{
  background:url('middle.png') repeat-y;
  width:800px;
  }
.bottom{
  background:url('bottom.png');
  height:20px;
  width:800px;
}

score 0 · Answer 11 · answered Aug 12 '10 at 12:21

0

Alternatively, you can make one big image, and use that as the background for the entire content area; then hard-code the positions and sizes of the contained elements.

answered Aug 12 '10 at 12:21

tdammers

20,353
1
39
56

CSS Shadows all four sides of div

11 Answers11

Linked