<!-- inspo: https://dribbble.com/shots/17635207-LogoIcon-Folio-10/attachments/12788451?mode=media -->
<img class="reference-image" src="https://screenshot.click/30-04-50ngu-s20dl.png"/>

<div class="gradient-ball-drop">
  <div class="ball" data-ball-id="1"></div>
  <div class="ball" data-ball-id="2"></div>
  <div class="ball" data-ball-id="3"></div>
  <div class="ball" data-ball-id="4"></div>
  <div class="ball" data-ball-id="5"></div>
</div>
  

.reference-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  transition: 0.4s;
  cursor: pointer;
  &:hover {
    width: 500px;
  }
}

.gradient-ball-drop {
  position: relative;
  height: 26vmax;
  cursor: pointer;
  
  &:hover {
    [data-ball-id="3"] {
      transform: translateX(30%) scale(1.1);
    }
    [data-ball-id="4"] {
      transform: translateX(60%) scale(1.25);
    }
    [data-ball-id="5"] {
      transform: translateX(90%) scale(1.4);
    }
  }
   &:active {
    [data-ball-id="2"] {
      transform: scale(1.5) translateX(50%);
      transition-duration: 0.1s;
      transform-origin: 125% 50%;
    }
    [data-ball-id="3"] {
      transform: translateX(100%) scale(2);
      transition-duration: 0.1s;
    }
    [data-ball-id="4"] {
      transform: translateX(200%) scale(3);
      transition-duration: 0.1s;
    }
    [data-ball-id="5"] {
      transform: translateX(300%) scale(4);
      transition-duration: 0.1s;
    }
  }
}

.ball {
  width: 10vmax;
  height: 10vmax;
  background: gray;
  border-radius: 5vmax;
  
  &[data-ball-id="1"] {
    height: 100%;
     background-image: linear-gradient(to bottom, #53FFFF 0%, #F57EFE 100%);
    //https://www.joshwcomeau.com/gradient-generator/
    background-image: linear-gradient(
  180deg,
  hsl(180deg 100% 66%) 0%,
  hsl(180deg 100% 66%) 4%,
  hsl(180deg 100% 66%) 9%,
  hsl(180deg 100% 66%) 13%,
  hsl(180deg 100% 66%) 17%,
  hsl(180deg 100% 66%) 22%,
  hsl(180deg 100% 66%) 26%,
  hsl(180deg 100% 66%) 30%,
  hsl(182deg 100% 70%) 35%,
  hsl(190deg 100% 77%) 39%,
  hsl(202deg 100% 82%) 43%,
  hsl(221deg 100% 86%) 48%,
  hsl(250deg 100% 87%) 52%,
  hsl(272deg 99% 84%) 57%,
  hsl(285deg 99% 80%) 61%,
  hsl(294deg 99% 76%) 65%,
  hsl(296deg 98% 75%) 70%,
  hsl(296deg 98% 75%) 74%,
  hsl(296deg 98% 75%) 78%,
  hsl(296deg 98% 75%) 83%,
  hsl(296deg 98% 75%) 87%,
  hsl(296deg 98% 75%) 91%,
  hsl(296deg 98% 75%) 96%,
  hsl(296deg 98% 75%) 100%
);
  }
  
  &[data-ball-id="2"],
  &[data-ball-id="3"],
  &[data-ball-id="4"],
  &[data-ball-id="5"] {
    position: absolute;
    bottom: 0;
    transition: all 0.25s cubic-bezier(0.5, 0, 0.5, 1);
  }
  &[data-ball-id="2"] {
    background-image: linear-gradient(to bottom, #F0ACFE, #F67EFE);
    background-image: linear-gradient(
  180deg,
  hsl(290deg 98% 84%) 0%,
  hsl(290deg 98% 83%) 2%,
  hsl(291deg 98% 83%) 5%,
  hsl(291deg 98% 82%) 8%,
  hsl(292deg 98% 82%) 11%,
  hsl(292deg 98% 82%) 14%,
  hsl(292deg 98% 81%) 18%,
  hsl(293deg 98% 81%) 22%,
  hsl(293deg 98% 80%) 26%,
  hsl(293deg 98% 80%) 30%,
  hsl(294deg 98% 79%) 34%,
  hsl(294deg 98% 79%) 39%,
  hsl(294deg 98% 79%) 44%,
  hsl(295deg 98% 78%) 49%,
  hsl(295deg 98% 78%) 54%,
  hsl(295deg 98% 77%) 60%,
  hsl(295deg 98% 77%) 65%,
  hsl(295deg 98% 76%) 71%,
  hsl(296deg 98% 76%) 78%,
  hsl(296deg 98% 75%) 84%,
  hsl(296deg 98% 75%) 91%,
  hsl(296deg 98% 75%) 99%
);
  }
  &[data-ball-id="3"] {
    // transform: translateX(30%) scale(1.1);
    background-image: linear-gradient(to bottom, #E39BFE, #E367FB);
  }
  &[data-ball-id="4"] {
    // transform: translateX(60%) scale(1.25);
    background: linear-gradient(to bottom right, #c48afd, #b543f9);
  }
   &[data-ball-id="5"] {
    // transform: translateX(90%) scale(1.4);
    // background: linear-gradient(to bottom right, #9d62f8, #1905ec);
     background: radial-gradient(circle at 20% 20%, #9d62f8, #1905ec);
     box-shadow: inset 0 0 24px #9d62f8cc, inset -12px -12px 48px #0003;
  }
}

/**** centering code ****/
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background: #001;
  background-image: radial-gradient(circle at 50% 50%, #124, #124 10%, #001);
}