<div class="blob"></div>

* {
  margin: 0;
  padding: 0;
}

html, body, main {
  height: 100%;
}

body {
  background-color: lightgoldenrodyellow;
}

.blob {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  height: 35vh;
  width: 35vw;
  background: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8); 
  background-size: 400% 400%;
  
  animation: 5s ease-in-out infinite blob-animation;
}


@keyframes blob-animation {
  20% {
    background-position:0% 50%;
    border-radius: 5% 95% 9% 91% / 18% 9% 91% 82%;
  }
  40% { 
    border-radius: 68% 32% 19% 81% / 89% 11% 89% 11%; 
  }
  60% {
    background-position:100% 50%;
    border-radius: 35% 65% 19% 81% / 61% 73% 27% 39%;
  }
  80% { 
    border-radius: 35% 65% 78% 22% / 84% 17% 83% 16%; 
  }
  100% {
    background-position: 0% 50%;
    border-radius: 0;
  }
}