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.