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

.blob {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  border-radius: 50%;
  animation: blob 2.5s ease-in-out infinite;
}
@keyframes blob {
  0%,
  100% {
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  }
  25% {
    border-radius: 60% 40% 70% 30% / 40% 60% 40% 60%;
  }
  50% {
    border-radius: 30% 70% 40% 60% / 60% 30% 70% 40%;
  }
  75% {
    border-radius: 50% 50% 30% 70% / 30% 70% 50% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blob,
  .blob * {
    animation: none !important;
  }
}