css property property not working as it should work normally

Admin 1
Viewed 70

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>

css html
2 Answers

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>

user_424460

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>

user_143273870
Related