css property property not working as it should work normally

Question

I'm not getting it why the property not works sometimes. How to fix this issue? You can see the shadow is at the upper layer. Why it is not going down or the other not coming forward?

*{
  margin: 0;
  padding: 0;
}
body , html{
    height: 100%;
}
section{
  position: relative;
  top: 50%;
  height: 50%;
  background: linear-gradient(to bottom, #e3e5e7, #fef9fa);
}
div{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: white;
  box-shadow: inset 25px -25px 35px rgba(100, 100, 100, 0.5);
  z-index: 2;
}
div::before{
  content: '';
  /* display: block; */
  position: absolute;
  bottom: 0;
  width: 180px;
  height: 45px;
  background: gray;
  border-radius: 50%;
  left: -100%;
  transform: translate(50%, 22px);
  filter: blur(5px);
  z-index: -5;
}

<section>
  <div class="ball"></div>
</section>

Can you show a photo where it went wrong? I can't see any problem here, did you try other browsers/devices? — Shiz, Oct 19 '20 at 08:11
@Shizukura the shadow is not following the `z-index` to fall behind the ball. — Mech, Oct 19 '20 at 08:13
The shadow is not going backward of the ball, see it closely — , Oct 19 '20 at 08:14

score 2 · Answer 1 · answered Oct 19 '20 at 08:33

Rather than using the pseudo element adding an additional div resolves this.

*{
  margin: 0;
  padding: 0;
}
body , html{
    height: 100%;
}
section{
  position: relative;
  top: 50%;
  height: 50%;
  z-index:1;
  background: linear-gradient(to bottom, #e3e5e7, #fef9fa);
}
div.ball{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: white;
  box-shadow: inset 25px -25px 35px rgba(100, 100, 100, 0.5);
  z-index: 2;
}
div.shadow{
  position: absolute;
bottom: 0;
width: 180px;
height: 45px;
background: #d8d0d0;
border-radius: 50%;
left: 90px;
transform: translate(50%, 22px);
filter: blur(5px);
}

<section>
  <div class="ball"></div>
  <div class="shadow"></div>
</section>

This is the solution I was looking towards. – Mech Oct 19 '20 at 19:05 — Mech, Oct 19 '20 at 19:05

score 1 · Answer 2 · answered Oct 19 '20 at 09:20

EXPLANATION: the ::before and ::after pseudo elements are inserted INSIDE the element that is selected. So basically you are rendering the shadow inside of the ball. So z-index has no effect. But you can use this smart mix of ::before and ::after.

*{
  margin: 0;
  padding: 0;
}
body , html{
    height: 100%;
}
section{
  position: relative;
  top: 50%;
  height: 50%;
  background: linear-gradient(to bottom, #e3e5e7, #fef9fa);
}
div{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
}
div::after{
  position: absolute;
  top: 0;
  content: '';
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: white;
  box-shadow: inset 25px -25px 35px rgba(100, 100, 100, 0.5);
  z-index: 2;
}
div::before{
  content: '';
  /* display: block; */
  position: absolute;
  bottom: 0;
  width: 180px;
  height: 45px;
  background: gray;
  border-radius: 50%;
  left: -100%;
  transform: translate(50%, 22px);
  filter: blur(5px);
  z-index: -5;
}

<section>
  <div class="ball"></div>
</section>

css property property not working as it should work normally

2 Answers2