Morphing Blob
A gradient blob that endlessly morphs its border-radius and rotates — a trendy organic shape.
<div class="blob-wrap"><div class="blob"></div><div class="blob-txt">Morphing</div></div>body{background:#0d1426}
.blob-wrap{position:relative;width:240px;height:240px;display:grid;place-items:center}
.blob{position:absolute;width:200px;height:200px;background:linear-gradient(135deg,#ff7a18,#ff477e);border-radius:42% 58% 70% 30%/45% 45% 55% 55%;animation:morph 8s ease-in-out infinite;filter:blur(.5px)}
.blob-txt{position:relative;color:#fff;font:800 24px/1 system-ui,sans-serif;z-index:1}
@keyframes morph{0%,100%{border-radius:42% 58% 70% 30%/45% 45% 55% 55%;transform:rotate(0)}34%{border-radius:70% 30% 46% 54%/30% 60% 40% 70%}67%{border-radius:30% 70% 60% 40%/60% 30% 70% 40%;transform:rotate(20deg)}}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.