body {
  display: flex;
  gap: 40px;
  padding: 40px;
  justify-content: center;
  align-items: start;
  background: #000;
}

/* shared base */
.pill, .bubble {
  position: relative;
  border-radius: 999px;
  
  /* MAIN BODY (inner blue gradient) */
  background:
    linear-gradient(
      to bottom,
     rgba(152, 249, 255, 0.4) 10%, /*light*/
      rgba(120, 194, 255, 1) 40%,
      rgba(114, 183, 252, 1) 60%, /*darkest value*/
      rgba(170, 236, 255, 1) 100%
    );
  box-shadow:
    /*outer edge*/
    0 2px 6px rgba(40, 70, 120, 0.6),
    
   /*inwards edge*/
    inset 0px 0px 30px  rgba(60, 86, 156, 1),
    inset 0px 2px 20px rgba(0, 44, 160, 1),

    /*top glow*/
    inset 0 6px 10px rgba(255,255,255,1),

    /*bottom shadow*/
    inset 0 -10px 15px rgba(0,0,0,0.25),

    /*inner edge*/
    inset 0 0 0 3px rgba(70,100,160,0.5);
}

.bubble, .bubble2, .fancybubble {
  overflow: hidden;
}

.pill::before, .bubble::before, .pill2::before, .bubble2::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 4%;
  left: 2%;
  right: 2%;
  border-radius: inherit;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.95) 4%,
    rgba(255,255,255,0.5) 15%,
    rgba(255,255,255,0.1) 35%,
    transparent 80%
  );

  filter: blur(1px);
}


/*
.bubble::after {
  content: "";
  position: absolute;
  top: 4%;
  left: 18%;
  width: 22%;
  height: 35%;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(255,255,255,0.9) 0%,
    rgba(255,255,255,0.5) 40%,
    transparent 70%
  );

  filter: blur(1.5px);
}
*/

.pill, .pill2 {
  width: 500px;
  height: 70px;
}

.bubble, .bubble2, .fancybubble {
  width: 70px;
  height: 70px;
}

  
  
  
  .pill2, .bubble2 {
  position: relative;
  border-radius: 999px;
  
  /* MAIN BODY (inner blue gradient) */
  background:
    linear-gradient(
      to bottom,
     rgba(152, 249, 255, 0.4) 10%, /*light*/
      rgba(120, 194, 255, 1) 40%,
      rgba(114, 183, 252, 1) 60%, /*darkest value*/
      rgba(170, 236, 255, 1) 100%
    );
  box-shadow:
    /*outer edge*/
    0 2px 6px rgba(40, 70, 120, 0.6),
    
   /*inwards edge*/
    inset 0px 0px 10%  rgba(60, 86, 156, 1),
    inset 0px 2px 10% rgba(0, 44, 160, 1),

    /*top glow*/
    inset 0 6px 10px rgba(255,255,255,1),

    /*bottom shadow*/
    inset 0 -10px 15px rgba(0,0,0,0.25),

    /*inner edge*/
    inset 0 0 0 3px rgba(70,100,160,0.5);
}


.fancybubble {
  border-radius: 50%;
  position: relative;

  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9), transparent 40%),
    radial-gradient(circle at 70% 75%, rgba(255,255,255,0.25), transparent 50%),
    
    radial-gradient(circle at 50% 50%,
      rgba(161, 255, 210, 1), /*dot*/
      rgba(173, 216, 255, 1), /*middle*/
      rgba(221, 188, 255, .8), /*outer*/
      transparent 80%
    );

  box-shadow:
    0 0 20px rgba(173, 216, 255, 0.4),
    inset 0 0 30px rgba(255,255,255,0.6);

  filter: blur(2px);
}


@keyframes shimmer {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(20deg);
  }
  100% {
    filter: hue-rotate(40deg);
  }
}
@keyframes moveit {
  0% { transform: translate(-10%, -10%); }
  50% { transform: translate(10%, 10%); }
  100% { transform: translate(-10%, -10%); }
}
.fancybubble {
  animation: shimmer 6s linear infinite alternate; 
}
  
 .fancybubble2
  {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  position: relative;

  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9), transparent 40%),
    radial-gradient(circle at 70% 75%, rgba(255,255,255,0.25), transparent 50%),
    
    radial-gradient(circle at 50% 50%,
      rgba(161, 255, 210, 1), /*dot*/
      rgba(173, 216, 255, 1), /*middle*/
      rgba(221, 188, 255, .8), /*outer*/
      transparent 80%
    );

  box-shadow:
    0 0 20px rgba(173, 216, 255, 0.4),
    inset 0 0 30px rgba(255,255,255,0.6);

  filter: blur(2px);
  animation: moveit 5s  ease-in-out infinite alternate;
}
  
  .fancybubble2::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9), transparent 40%),
    radial-gradient(circle at 70% 75%, rgba(255,255,255,0.25), transparent 50%),
    
    radial-gradient(circle at 50% 50%,
      rgba(161, 255, 210, 1), /*dot*/
      rgba(173, 216, 255, 1), /*middle*/
      rgba(221, 188, 255, .8), /*outer*/
      transparent 80%
    );
  animation: moveit 5s  ease-in-out infinite alternate;

  box-shadow:
    0 0 20px rgba(173, 216, 255, 0.4),
    inset 0 0 30px rgba(255,255,255,0.6);

  filter: blur(2px);
}