Morphing shape
The gradient square morphs between a perfect circle and an organic blob by animating border-radius and a slow rotate.
AI is thinking
Use this silhouette as a placeholder avatar or generative-task spinner.
Widely Supported
Quick implementation
@keyframes morphing-shape-morph {
0%, 100% { border-radius: 50%; }
50% { border-radius: 28% 72% 33% 67% / 45% 36% 64% 55%; }
}
.morphing-shape-card__blob {
animation: morphing-shape-morph 5s ease-in-out infinite;
}Prompt this to your LLM
Loaders and mascots.
You are animating a soft “blob” shape.
Goal: keyframe between border-radius: 50% and an asymmetric organic radius tuple; optional slow rotate.
Constraints:
- prefers-reduced-motion: freeze as circle.
- Fixed width/height for predictable morph.
Return CSS.Why this matters in 2026
Organic motion reads as friendly and “AI-native” without relying on heavy Lottie assets.
The logic
Interpolating between two radius shapes is cheap paint work; keep dimensions fixed to avoid layout thrash.
Accessibility & performance
Disable the loop for reduced motion; avoid pairing with rapid hue shifts.