How to prevent a div element to be affected by the box-shadow of another div element?

Question

I am interested in making a website where 2 div elements with different size to drop a shadow, but without being affected by the other's shadow.

I have tried to put the same z-index in both elements, but the last one has priority over the first one and its shadow overlaps it.

So, as the title says, how could it be done?

EDIT: I have read the Two divs with shadows looks like one part. Is it possible in CSS? post, but that do not solve my problem because I can not move the shadow any pixel.

One option would be to use the first option, then add another blue box at the same location as the first one, but without the shadow, and a higher z-index. — jcaron, Jul 19 '16 at 23:09
Possible duplicate of [Two divs with shadows looks like one part. Is it possible in CSS?](http://stackoverflow.com/questions/10625025/two-divs-with-shadows-looks-like-one-part-is-it-possible-in-css) — showdev, Jul 19 '16 at 23:09
I am using JavaScript to handle some dynamic shadows and this must be set like this, I mean, without offsetting it. — David Tabernero M., Jul 20 '16 at 00:21

HaukurHaf · Answer 1 · 2016-07-19T23:31:32.673

2

You could just omit the left-side shadow of the green box, or sort of.

.div2 {
  background:#B1FA00;
  width:200px;
  height:50px;
  float:left;
  box-shadow: 0 0 0 gray, 
       0 0 0 transparent, 8px 8px 15px gray;
}

Example:

https://jsfiddle.net/b1483vuk/1/

Example with both divs in white:

https://jsfiddle.net/b1483vuk/2/

edited Jul 19 '16 at 23:31

answered Jul 19 '16 at 23:17

HaukurHaf

13,522
5
44
59

It seems really good, but if both div elements have the same color (white, for example), you can still see the shadow so it doesn't solve my problem, sorry – David Tabernero M. Jul 19 '16 at 23:28
Hmmm. I just updated my answer with a second jsfiddle where both divs are white. Seems to work fine on my machine (Chrome). I just had to adjust the offset of the shadow by two pixels to the right. – HaukurHaf Jul 19 '16 at 23:32
I am using Firefox, which uses bigger shadows than Chrome, that could be the explanation. – David Tabernero M. Jul 19 '16 at 23:35

score 2 · Answer 2 · answered Jul 20 '16 at 05:29

If you move the box-shadow to a pseudo element for each box, you can position the pseudo element behind both boxes using z-index.

The css would look like:

div {
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 12px black;
  z-index: -1;
}

It may not work in your situation, but the following fiddle demonstrates this:

https://jsfiddle.net/adrianlynch/16r8bp5a/

score 1 · Accepted Answer · answered Jul 19 '16 at 23:31

1

The comment made by @jcaron solve my problem:

One option would be to use the first option, then add another blue box at the same location as the first one, but without the shadow, and a higher z-index.

Thank you all for your support.

answered Jul 19 '16 at 23:31

David Tabernero M.

585
9
22

score 1 · Answer 4 · answered Jul 20 '16 at 16:06

1

Cover it up with a :before as @0b10011 said:

<style type="text/css">
#two {
    position:relative; /* Add relative positioning */
}
/* Add :before element to cover up shadow */
#two:before {
    background:white;
    display:block;
    content:".";
    font-size:0;
    width:4px; /* Width of Shadow */
    height:100px; /* Height of #one */
    position:absolute;
    left:-4px; /* 0 - Width of Shadow */
    top:0;
}
</style>

answered Jul 20 '16 at 16:06

Paul Dard

11
2

but where is the shadow-box? – David Tabernero M. Jul 20 '16 at 16:08
1

put it in both div elements – Paul Dard Jul 20 '16 at 16:11

score 0 · Answer 5 · answered Jul 19 '16 at 23:13

0

Try offsetting the shadow so you isolate the left side of the green rectangle at set its z-index to be superior.

Try something like this.

box-shadow: 10px 0px 0px 10px #888888;

Codepen: http://codepen.io/danielsinger/pen/grvJGw

answered Jul 19 '16 at 23:13

Daniel Singer

71
1
6

The post I referred explains how to do it offsetting the shadows, but I can not offset them. I am looking for an alternative. – David Tabernero M. Jul 20 '16 at 00:23

score 0 · Answer 6 · answered May 10 '21 at 05:10

There is a simple easy solution just using z-index and overlaying a div over another. you will notice a slight thickening of the shadow around the join between yellow and green, this is from the div shadows overlapping, and as far as I'm aware (which is not very far), this is unavoidable.

.a1 {
        z-index:5;
        width:50px;
        height:100px;
        box-shadow: 0 0 5px 3px black;
        position:absolute;
        top:50px;
        left:20px;
        background-color:white;
      }
      .a11 {
        z-index:10;
        width:50px;
        height:100px;
        position:absolute;
        top:50px;
        left:20px;
        background-color:yellow;
      }
      .a2 {
        z-index:8;
        width:100px;
        height:50px;
        box-shadow: 0 0 5px 3px black;
        position:absolute;
        top:100px;
        left:70px;
        background-color:green;
      }

<html>
  <body>
    <div class=a1></div>
    <div class=a11></div>
    <div class=a2></div>
  </body>
</html>

How to prevent a div element to be affected by the box-shadow of another div element?

6 Answers6