box shadows on multiple elements at same level but without overlap? - css

Question

I want to create something like the following screenshot, but I can't figure out any z-index value for which the shadow doesn't appear either over the first or second box (they are always stacked either with the first one on top, or the second).
Is there a way to achieve the following?
body { background: darkgrey; padding-top: 50px}
div { background: white; width: 200px; height: 200px; box-shadow: 0 0 20px
black; margin: auto; position: relative; }
#box-one { left: -50px; z-index: 1; }
#box-two { right: -50px; z-index: 1; }
https://codepen.io/eoghanmurray/pen/oVEEVK

Answer 1

If you can use filter and drop-shadow then you can apply a drop-shadow to the container. This shadow differs as it conforms to the alpha channel of the image (in this case, the outline of the content) instead of a simple rectangle:
body {
background: darkgrey;
padding-top: 50px
}
#box-one,
#box-two {
background: white;
width: 200px;
height: 200px;
margin: auto;
position: relative;
}
#box-one {
left: -50px;
z-index: 1;
}
#box-two {
right: -50px;
z-index: 1;
}
#top {
filter: drop-shadow(0 0 20px black);
}
<div id="top">
<div id="box-one"></div>
<div id="box-two"></div>
</div>

Answer 2

You can consider drop-shadow filter on a parent element:
body {
background: pink;
}
.b1,
.b2 {
width: 150px;
height: 150px;
background: #fff;
}
.b2 {
margin-left: 100px;
}
.container {
filter:drop-shadow(0 0 10px #000);
}
<div class="container">
<div class="b1"></div>
<div class="b2"></div>
</div>
Or use an extra element to hide the overlapping shadows:
body {
background: pink;
}
.b1,
.b2 {
width: 150px;
height: 150px;
background: #fff;
box-shadow: 0 0 13px #000;
position: relative;
}
.b2 {
margin-left: 100px;
}
.b1:before,
.b2:before {
content: "";
position: absolute;
bottom: 0px;
right: 0;
left: 0;
height: 15px;
background: inherit;
z-index: 1;
}
.b2:before {
top: 0;
bottom: initial;
}
<div class="container">
<div class="b1"></div>
<div class="b2"></div>
</div>
You can also build this using only one element:
body {
background: pink;
}
.container {
width:250px;
height:300px;
background:
linear-gradient(#fff,#fff) top left,
linear-gradient(#fff,#fff) bottom right;
background-size:150px 150px;
background-repeat:no-repeat;
filter:drop-shadow(0 0 10px #000);
}
<div class="container">
</div>

Answer 3

I create a new div and set some css for it.
body { background: darkgrey; padding-top: 50px}
div { background: white; width: 200px; height: 200px; box-shadow: 0 0 20px black; margin: auto; position: relative; }
#box-one { left: -50px; }
#box-two { right: -50px; }
#div1{
position:absolute;
background: white;
width:100px;
height:15px;
margin-right:10px;
box-shadow: none;
margin-top:185px;
margin-left:199px;
content: '';
z-index: 1
}
<div id="div1"></div>
<div id="box-one"></div>
<div id="box-two"></div>

Answer 4

A cleaner solution is to add the box-shadow to a pseudo-element like ::before or ::after and then add position:relative to a parent element.
#box-one
{
left: -50px;
}
#box-two
{
right: -50px;
}
body
{
background: darkgrey;
padding-top: 50px;
}
.box-container
{
position: relative;
z-index: 2;
}
.box
{
background: white;
width: 200px;
height: 200px;
margin: auto;
position: relative;
}
.box::after
{
content: "";
box-shadow: 0 0 20px black;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
<div class="box-container">
<div id="box-one" class="box"></div>
<div id="box-two" class="box"></div>
</div>