html - Orb with shadow

Question

How to create the same orb with shadow? I have a design in figma that I need to repeat.

https://www.figma.com/file/JNkwb1Yq21BjP5rxXGWnR8/Untitled?node-id=0%3A1

I set all properties but it seem flatter.

https://jsfiddle.net/dhs37540/

.image {
  position: relative;
  width: 46px;
  height: 46px;
}

.image__inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.image--group-1 {
  position: absolute;
  left: 9.32%;
  right: 17.41%;
  top: 10.27%;
  bottom: 18.17%;
  filter: blur(5px);
  z-index: 6;
}
.image--group-1::before {
  content: '';
  position: absolute;
  left: 9.32%;
  right: 17.41%;
  top: 10.27%;
  bottom: 18.17%;
  background: #FFFFFF;
  box-shadow: -9.375px -9.375px 18.75px #FFFFFF, 16.4062px 10.1562px 21.875px rgba(76, 77, 99, 0.13);
  border-radius: 39.0625px;
  z-index: 5;
}
.image--group-2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 4;
}

.image--group-2::before {
  content: '';
  position: absolute;
  left: 3.68%;
  right: 4.13%;
  top: 4.69%;
  bottom: 4.69%;
  background: #F5F6FB;
  mix-blend-mode: normal;
  box-shadow: 0 3.125px 3.125px rgba(34, 29, 98, 0.16);
  filter: blur(2px);
  border-radius: 39.0625px;
  z-index: 3;
}
.image--group-2::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #FFFFFF;
  box-shadow: 0 3.125px 15.625px rgba(124, 126, 198, 0.1), 15.625px 15.625px 15.625px rgba(18, 16, 104, 0.06);
  border-radius: 39.0625px;
  z-index: 2;
}

<div class="image">
  <div class="image__inner">
    <div class="image--group-1">
    </div>
    <div class="image--group-2">
    </div>
  </div>
</div>

Answer 1

等待大神答复