Liquid Effect

Liquid/blob morphing effect CSS

40
4
.liquid-blob {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
  border-radius: 33% 65% 60% 55% 39% 62% 64% 43%;
  animation: liquidMorph 4s ease-in-out infinite;
}

@keyframes liquidMorph {
  0%, 100% {
    border-radius: 33% 65% 60% 55% 39% 62% 64% 43%;
  }
  50% {
    border-radius: 67% 33% 67% 55% 55% 36% 47% 69%;
  }
}

Instructions

Liquid/blob morphing effect CSS.