blob morph organic animated background shape decorative background element for hero sections organic shape accent for landing pages animated avatar frame geometric shapes feel too rigid need organic animated background element want liquid blob effect in pure CSS
Morph Blob
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/morph-blob.json
Morphing Blob
Ambient organic background accent
Background
Customize
Quick Start
<div class="morph-blob"></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 708 bytes · 33 lines
- Custom Properties
-
--blob-size--blob-color--blob-speed - Classes
-
.morph-blob
blob morph organic animated background shape
An organic, continuously morphing blob shape using animated border-radius with asymmetric percentage values. Falls back to a perfect circle when motion is reduced.
Decorative blob behind content
<div class="relative">
<div class="morph-blob absolute -z-10 opacity-30 blur-2xl"></div>
<div class="relative z-10 p-8">Your content here</div>
</div>