CSS BOX SHADOW ISSUE - css

Question

Hi Iam trying to create shadow to box inside another box but not getting what I want
<div class="box effect2">
<div class="box effect2">
box inside box
<div>
<div>
CSS Styles
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
I tried this code but not successful. Please tell me if I am doing anything wrong?
I have taken code reference from the css tricks website

Answer 1

Turning my comment into an answer. Both shadows are there, you have the z-index set to -1, so the shadows fall under everything.
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.effect2, .effect3 {
position: relative;
}
.effect2:before,
.effect2:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
.effect3:before,
.effect3:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #cc0000;
-webkit-box-shadow: 0 15px 10px #cc0000;
-moz-box-shadow: 0 15px 10px #cc0000;
box-shadow: 0 15px 10px #cc0000;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
<div class="box effect2">
<div class="box effect3">
box inside box
</div>
</div>
I added another class to the inside box so you can see what's happening. Also, you will have a difficult time setting this style of drop shadow to a child and parent element because of the z-indexes.
EDIT***
Here's the solution you're looking for. I had to add another element:
.box1 {
background: #fff;
width: 400px;
height: 400px;
position: relative;
}
.wrap {
position: relative;
z-index: 5;
}
.box2 {
background: #ccc;
width: 200px;
height: 200px;
margin: 10px;
position: absolute;
}
.effect1:before,
.effect1:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-3deg);
}
.effect1:after {
transform: rotate(3deg);
right: 10px;
left: auto;
}
.effect2:before,
.effect2:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-3deg);
}
.effect2:after {
transform: rotate(3deg);
right: 10px;
left: auto;
}
<div class="box1 effect1">
<div class="wrap">
<div class="box2 effect2">my box</div>
</div>
</div>
Solution Fiddle: https://jsfiddle.net/9nqcx28a/8/