box-shadow being cut off

Question

While using CSS3's box-shadow I am having an issue I do not usually have.

The box shadow usually just bleeds over the div edges, but not on this one.

box-shadow that is being cut off on the top and right hand side..

Heres the css I'm using for box-shadow:

-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
 box-shadow: 0 0 5px #555;

Cheers

score 61 · Answer 1 · edited Sep 12 '17 at 16:51

61

The problem is your center-main div is cropping off the edge of the shadow. Set overflow:visible on this and you should see it.

edited Sep 12 '17 at 16:51

Teivaz

5,462
4
37
75

answered Oct 03 '12 at 17:16

quoo

6,237
1
19
36

Thank you, I thought this was the issue but I didn't see this one. You're amazing. – Brandon Fredericksen Oct 03 '12 at 17:20
Or you can remove `overflow:auto;` – Alessandro_Russo Sep 05 '19 at 14:16

Brandon Fredericksen · Accepted Answer · 2012-10-03T17:29:02.173

37

If box-shadow is being cut-off, make sure overflow:visible is set on any div(s) your element is contained in.

edited Oct 03 '12 at 17:29

answered Oct 03 '12 at 17:22

Brandon Fredericksen

1,089
2
11
22

I took out the example site link in the original post, so I am leaving this explanation for people having this issue in the future. – Brandon Fredericksen Oct 03 '12 at 17:24
1

How can I get the drop shadow displayed though if overflow:hidden is needed? For example a floating dashboard grid that needs to scroll if it's content overflows – David Mays Oct 14 '20 at 13:52
@DavidMays You'll want to add another containing div with enough margin/padding to show your entire dropdown shadow in this new container with overflow scrolling. – Brandon Fredericksen Oct 21 '20 at 23:00
And if you want the scrolling element to be inside the shadowed element you're out of luck. – Emperor Eto Jul 12 '22 at 15:28
needing a more general solution, it's not always possible to modify overflow of parent containers – John Miller Jun 21 '23 at 18:15

score 13 · Answer 3 · answered Jun 13 '19 at 11:26

13

use padding + negative margin like:

.img {
  padding: 10px;
  margin: -10px;
}

answered Jun 13 '19 at 11:26

Ferenc Sticza

139
1
3

1

2019 Oct. I was having this problem with a drop-shadow on IOS Chrome. Intermittently. This solved it! Thanks. – den232 Oct 18 '19 at 14:59

score 5 · Answer 4 · answered Sep 24 '14 at 04:57

I have run into this problem multiple times with IE, and the best solution I've found is to use a transparent outline around the div. This seems to prevent IE from clipping the box shadow, as it does even in cases where Gecko and Webkit don't. One great thing about using outline to fix this problem is that it doesn't affect the position of the div.

For example, I had a div with which I had used position: absolute and bottom: -30px to put it in a certain place relative to its parent div. IE, and only IE, was cutting off the top and bottom of the box shadow. Adding this outline fixed it, without changing the position.

outline: 10px solid transparent;

This works perfectly when you're using `box-shadow` as a pseudo responsive border. — David Alsbright, Dec 16 '19 at 18:52

score 0 · Answer 5 · answered Oct 03 '12 at 17:26

0

you can set this style img tag for show shadow-box correctly

.img{
  margin:20px;
 -moz-box-shadow: 0 0 5px #555;
  -webkit-box-shadow: 0 0 5px #555;
  box-shadow: 0 0 5px #555;
 }

answered Oct 03 '12 at 17:26

Afshin

4,197
3
25
34

This would of course, change the positioning of the image as well. – quoo Oct 03 '12 at 17:40

score 0 · Answer 6 · answered Mar 02 '20 at 16:46

0

you can use

.img{
    filter: drop-shadow(0 0 5px #555);
}

instead

answered Mar 02 '20 at 16:46

Roman P.

9
1

score 0 · Answer 7 · answered Nov 30 '22 at 12:10

0

I managed to resolve the same issue on my local project by setting the image to have the following css property:

position: relative;

answered Nov 30 '22 at 12:10

H_G

11
4

score 0 · Answer 8 · answered Dec 05 '22 at 19:23

0

I've also encountered this issue. In these cases I add position: relative and a z-index to the box shadow container.

Please see this fiddle for a visual.

answered Dec 05 '22 at 19:23

CSSBurner

1,565
15
13

box-shadow being cut off

8 Answers8

Linked