How to hide shadow between two adjoined divs

Question

I have two divs on top of each other (adjoined) and they booth as one unit shall have one box-shadow. Now the upper div gives shadow on the lower div which I don't want. I have tried to manipulate it with a "z-index:2" to be more on top but no luck.

I would like to hide the bottom shadow of the upper div and hide the top shadow of the lower div

Also I don't want the shadow to fold into the adjoined sides. The two divs should be one unit having one shadow

In my example here I have simpified the html

<div class="upper-box" style="width:100px;height:100px;">
</div>
<div class="lower-div" style="width:100px;height:100px;">
</div>

In the jsfiddle the css is all in original and here goes all the work of change.

.upper-box {
    border-top: 0 none;
    margin-bottom: 2px;
    margin-top: -2px;
    overflow: auto;
    position: relative;
    padding-top: 0;

    /* Expanded panel gets emphasized by a shadow */
    box-shadow: 0px 6px 50px 7px rgba(255,255,255,0.75),
                0px 6px 50px 7px rgba(88,88,88,0.75),
                0px 6px 50px 7px rgba(88,88,88,0.75),
                0px 6px 50px 7px rgba(88,88,88,0.75)
                ;
    z-index: 3;
    border-style: solid;
    border-color: #000000;
    border-width: 0px;
    position: relative;
 }    

 .lower-div {
    border-bottom: 0px;

    box-shadow: 0px 6px 50px 7px rgba(88,88,88,0.75);
    z-index: 2;
    border-style: solid;
    border-color: #000000;
    border-width: 0px;
}

I would like to hide the bottom shadow of the upper div and hide the top shadow of the lower div

Also I don't want the shadow to fold into the adjoined sides. The two divs should be one unit having one shadow

Here is my live demo

https://jsfiddle.net/y289sdeb/

Answer 1

You could use a pseudo element, like this

.upper-box {
  position: relative;
  width: 100px;
  height: 100px;
  background: white;
}
.lower-div {
  position: relative;
  width: 100px;
  height: 100px;
  background: white;
}
.upper-box::after,
.lower-div::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px 6px 50px 7px rgba(88, 88, 88, 0.75);
  z-index: -1;
}

<div class="upper-box">

</div>

<div class="lower-div">

</div>

Based on a comment, a wrapper can be used

.wrapper {
  position: relative;
  display: inline-block;
}
.upper-box {
  position: relative;
  width: 100px;
  height: 100px;
}
.lower-div {
  position: relative;
  width: 100px;
  height: 100px;
}
.wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px 6px 50px 7px rgba(88, 88, 88, 0.75);
  z-index: -1;
}

<div class="wrapper">
  
  <div class="upper-box">

  </div>

  <div class="lower-div">

  </div>
  
</div>