user2969053 user2969053 - 1 month ago 12
CSS Question

How to hide shadow between two adjoined divs

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

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>

Comments