<html>
  <body>
    <div class="container">
      <div class="shape"></div>
    </div>
  </body>
</html>

:root {
  --background: #005;
  --primary: #88D5BF;
  --secondary: #5D6BF8;
  --third: #e27fcb;
}

* {
  box-sizing: border-box;
}

body {
  background: #005;
}

.container {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.shape {
  background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  animation: morph 8s ease-in-out infinite;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  height: 400px;
  transition: all 1s ease-in-out;
  width: 400px;
  z-index: 5;
}

@keyframes morph {
  0% {
      border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
      background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  } 
  
  50% {
      border-radius:  30% 60% 70% 40% / 50% 60% 30% 60%;
      background: linear-gradient(45deg, var(--third) 0%, var(--secondary) 100%);
  }
  
  100% {
    border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
    background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  } 
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.