25 CSS Spinners 22 / 25
Liquid Blob CSS Spinner
A fluid-blue gradient blob morphs organically through six distinct multi-value border-radius shapes while slowly rotating, creating an amorphous liquid motion effect.
This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.
The code
<div class="sp-22"> <div class="sp-22__blob"></div> </div>
<div class="sp-22">
<div class="sp-22__blob"></div>
</div>.sp-22,.sp-22 *,.sp-22 *::before,.sp-22 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-22{
--bg:#020911;
--c1:#00c6fb;
--c2:#005bea;
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background:var(--bg);
}
.sp-22__blob{
width:80px;
height:80px;
background:linear-gradient(135deg,var(--c1),var(--c2));
box-shadow:0 0 20px rgba(0,198,251,0.4),0 0 40px rgba(0,91,234,0.2);
animation:sp-22-morph 3s ease-in-out infinite, sp-22-spin 6s linear infinite;
}
@keyframes sp-22-morph{
0%,100%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}
20%{border-radius:30% 60% 70% 40% / 50% 60% 30% 60%}
40%{border-radius:70% 30% 50% 50% / 30% 70% 60% 40%}
60%{border-radius:40% 60% 30% 70% / 70% 40% 50% 60%}
80%{border-radius:50% 50% 60% 40% / 40% 50% 70% 60%}
}
@keyframes sp-22-spin{
to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
.sp-22__blob{animation:none;border-radius:50%}
} .sp-22,.sp-22 *,.sp-22 *::before,.sp-22 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-22{
--bg:#020911;
--c1:#00c6fb;
--c2:#005bea;
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background:var(--bg);
}
.sp-22__blob{
width:80px;
height:80px;
background:linear-gradient(135deg,var(--c1),var(--c2));
box-shadow:0 0 20px rgba(0,198,251,0.4),0 0 40px rgba(0,91,234,0.2);
animation:sp-22-morph 3s ease-in-out infinite, sp-22-spin 6s linear infinite;
}
@keyframes sp-22-morph{
0%,100%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}
20%{border-radius:30% 60% 70% 40% / 50% 60% 30% 60%}
40%{border-radius:70% 30% 50% 50% / 30% 70% 60% 40%}
60%{border-radius:40% 60% 30% 70% / 70% 40% 50% 60%}
80%{border-radius:50% 50% 60% 40% / 40% 50% 70% 60%}
}
@keyframes sp-22-spin{
to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
.sp-22__blob{animation:none;border-radius:50%}
}How this works
The blob is a single element with background:linear-gradient(135deg,var(--c1),var(--c2)) and two simultaneous animations: sp-22-morph cycles the eight-value border-radius notation (X1% X2% X3% X4% / Y1% Y2% Y3% Y4%) through five distinct organic keyframe states, and sp-22-spin provides a slow 6-second full rotation.
The eight-value border-radius shorthand controls each of the four corners' horizontal and vertical radii independently, enabling truly organic shapes that no single-value border-radius can produce. CSS interpolation smoothly transitions between these states, creating the flowing liquid morphing appearance.
Customize
- Change the gradient via
--c1and--c2— a fire-like orange-to-red gradient creates a lava blob; green-to-yellow creates a slime effect. - Add more keyframe states between 0% and 100% (e.g. at 10%, 30%, 50%, 70%, 90%) for more complex morphing paths.
- Remove
sp-22-spinand let only the morph run for a stationary pulsing blob that doesn't rotate. - Apply
filter:blur(4px)and scale the element up, then clip with a sharp-edged parent container to create a "blobby fill" effect. - Nest a second smaller blob inside and give it a complementary morphing animation at double speed for a cell-division visual.
Watch out for
- The eight-value border-radius notation requires all eight values to be present in both keyframe states for smooth interpolation — missing values in one keyframe and present in another causes a snap.
- CSS interpolation of complex border-radius values can produce shapes that pass through visually undesirable configurations mid-transition; preview all intermediate states in DevTools animation inspector.
filter:drop-shadowon a morphing element repaints the shadow region on every frame; usebox-shadowfor better performance (it follows the border-box rather than the painted outline).
Browser support
| Chrome | Safari | Firefox | Edge |
|---|---|---|---|
| 60+ | 12+ | 60+ | 60+ |
Eight-value border-radius fully supported in all modern browsers; no polyfills needed.