.my-gradient {
  width: 300px;
  height: 300px;
  background: linear-gradient(300deg, #ff80b5, #9089fc);
  background-size: 200% 200%;
  border-radius: 50%;
  filter: blur(50px);
  position: absolute;
}

.my-gradient {
  animation: blobMoveMobile 7s ease-in-out infinite,
    gradientShift 3s ease infinite;
  opacity: 0.4;
}

@media (min-width: 1024px) {
  .my-gradient {
    animation: blobMoveDesktop 15s ease-in-out infinite,
      gradientShift 3s ease infinite;
    opacity: 0.4;
  }
}

@keyframes blobMoveDesktop {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    /* transform: translate(300%, 0); */
  }
  50% {
    transform: translate(300%, 150%);
  }
  75% {
    transform: translate(0, 150%);
  }
}

@keyframes blobMoveMobile {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    /* transform: translate(300%, 0); */
  }
  50% {
    transform: translate(100%, 100%);
  }
  75% {
    transform: translate(0, 100%);
  }
}

@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}