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

body{
  font-size: 10px;
}
.ball {
  font-size: 1.5vmin;
  width: 45em;
  aspect-ratio:1/1;
  border-radius:50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
      background:          
        radial-gradient(
          100% 100% at 50% 50%,
          rgba(#fff, 0)35%,
          rgba(transparent, .14) 50%,
        ) 50% 50% / 100% 100%, 
        radial-gradient(
          100% 100% at 65% 25%,
          rgba(#fff, .5)15%,
          rgba(transparent, 0) 30%,
        ) 50% 50% / 100% 100%,           
        radial-gradient(
          100% 100% at 60% 35%,
          rgba(#fff, .3)25%,
          rgba(transparent, 0) 40%,
        ) 50% 50% / 100% 100%,            
        radial-gradient(
          100% 100% at 50% 50%,
          rgba(#7CF4A9, 1.0)15%,
          rgba(#79B8DC, 1) 50%,
        ) 50% 50% / 100% 100%,        
;
            box-shadow: 
   
        -3em 5em 6em -3em rgba(#fff, .36) inset   ,              
        4em -5em 6em -1em rgba(0, 0, 0, .46) inset ,
        -4em 8em 3em -3em rgba(0, 0, 0, .36)    ,              
        -3em 6em 4em -3em rgba(0, 0, 0, .36)               
              ;      
      background-repeat:no-repeat;
  &:after{
    content:'';
    width:100%;
    height:100%;
    border-radius:inherit;
    position:absolute;
    box-shadow: 

      -3em 5em 6em -3em rgba(#f1f7fb, 1.36) inset   ,              
      4em -5em 6em -1em rgba(#3c5c6e, .8) inset ,
      4em -5em 6em -1em rgba(0, 0, 0, .16)  ,            
      -8em 0em 5em -5em rgba(0, 0, 0, .26)    ,              
      -8em 18em 5em 2em rgba(0, 0, 0, .16)               
      ;        
  }
}