Morphing Blob

An organic shape that continuously morphs using animated border-radius keyframes.

Published June 27, 2026

Demo

CSS

blob

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

CSS
				
				.blob {
  animation: blob-morph 8s ease-in-out infinite;
}

@keyframes blob-morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%       { border-radius: 50% 60% 50% 40% / 40% 30% 60% 50%; }
  75%       { border-radius: 40% 50% 60% 30% / 60% 40% 50% 70%; }
}

			

How it works

CSS border-radius accepts up to 8 values: four for horizontal radii and four for vertical radii, separated by a /. Animating between different combinations — like 60% 40% 30% 70% / 60% 30% 70% 40% and 30% 60% 70% 40% / 50% 60% 30% 60% — creates a smooth, organic morphing effect. Each blob uses animation-delay to desync the morphing cycles, making them feel independent.