<div class="ball"></div>
<div class="shadow-1"></div>
<div class="shadow-2"></div>

// colors
$bg-top-color: #eeedef;
$bg-center-color: #ebe8eb;
$bg-bottom-color: #bbbabb;
$ball-light-color: #fff;
$ball-dark-color: #dbdbdb;
$shadow-color: #000;

html,
body {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    $bg-top-color 0%,
    $bg-center-color 50%,
    $bg-bottom-color 80%
  );
  overflow: hidden;

  * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    box-sizing: border-box;

    &:before,
    &:after {
      content: "";
      position: absolute;
    }
  }
}

.ball {
  z-index: 2;
  width: 50vmin;
  height: 50vmin;
  left: -25vmin;
  background: linear-gradient(
    145deg,
    $ball-light-color 0%,
    $ball-dark-color 30%,
    darken($ball-dark-color, 40%) 85%
  );
  border-radius: 50%;
  box-shadow: 0 0 12vmin 0 rgba($shadow-color, 0.75) inset;
}

.shadow {
  &-1 {
    width: 29vmin;
    height: 10vmin;
    background: $shadow-color;
    border-radius: 50%;
    top: 37vmin;
    left: -25vmin;
    filter: drop-shadow(0 4vmin 3.5vmin $shadow-color);

    &::before {
      width: 15vmin;
      height: 5vmin;
      background: $shadow-color;
      border-radius: 50%;
      transform: rotate(-22deg);
      box-shadow: 0 0 4vmin 2vmin $shadow-color;
      left: 18vmin;
      top: -1vmin;
    }

    &::after {
      width: 28vmin;
      height: 0vmin;
      box-shadow: 0 0 6.5vmin 1vmin $shadow-color;
      left: 26vmin;
      top: 1vmin;
    }
  }

  &-2 {
    width: 10vmin;
    height: 0;
    border-radius: 50%;
    transform: rotate(-10deg);
    box-shadow: 0 0 8vmin 2vmin $shadow-color,
      5vmin 0 8vmin 1.5vmin $shadow-color;
    top: 36vmin;
    left: 11vmin;
  }
}