CSS Overlapping shadows

Question

https://codepen.io/gitdix/pen/NWjbZZQ

Hello

I have three div elements with rounded corners, both have a shadow. the shadows are overlapping. I can't fiddle out to get both shadows behind all solids divs and z-index didnt help me actually :/

How can i fix that?

thanks in advance

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

.box {
  height: 250px;
  width: 50%;
  background-color: red;
  border-radius: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  -webkit-box-shadow: 0px 0px 47px 14px rgba(0, 0, 0, 0.46);
  box-shadow: 0px 0px 47px 14px rgba(0, 0, 0, 0.46);
}

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>

Answer 1

I set the shadow with :after pseudo-element and the content in a normal div. By doing it this way, I could apply z-index to each elements and make sure that the main content stays over the sahdow

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

.box {
  height: 250px;
  width: 50%;
  background-color: red;
  border-radius: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  
  position:relative; /* ADDED */
}
/* ADDED */
.box:after{
 content:"";
  display:block;
  position:absolute;
  left:0;
  top:0;
  height: 100%;
  width: 100%;
  border-radius: 50px;
  -webkit-box-shadow: 0px 0px 47px 14px rgba(0, 0, 0, 0.46);
  box-shadow: 0px 0px 47px 14px rgba(0, 0, 0, 0.46);
  z-index:-1;
}
/* ADDED */
.box > div{
  z-index:1;
}

<div class="box">
  <div>1</div>
</div>
<div class="box">
  <div>2</div>
</div>
<div class="box">
  <div>3</div>
</div>