Floating Shapes Backdrop
Soft shapes that float and rotate behind a card — a lively decorative backdrop.
<div class="fl-scene"><span class="sh s1"></span><span class="sh s2"></span><span class="sh s3"></span><span class="sh s4"></span><span class="sh s5"></span><div class="fl-card">Floating Shapes</div></div>body{background:#0d1426}
.fl-scene{position:relative;width:320px;height:220px;display:grid;place-items:center;overflow:hidden;border-radius:20px;background:#121a2e}
.sh{position:absolute;border-radius:30%;opacity:.7;animation:fl 6s ease-in-out infinite}
.s1{width:40px;height:40px;background:#ff7a18;top:20px;left:30px}
.s2{width:60px;height:60px;background:#ff477e;bottom:20px;right:40px;animation-delay:1s}
.s3{width:30px;height:30px;background:#5b6cff;top:40px;right:60px;animation-delay:2s}
.s4{width:50px;height:50px;background:#00d4ff;bottom:40px;left:50px;animation-delay:1.5s}
.s5{width:24px;height:24px;background:#16a34a;top:90px;left:120px;animation-delay:.5s}
.fl-card{position:relative;color:#fff;font:800 20px/1 system-ui,sans-serif;z-index:1}
@keyframes fl{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(40deg)}}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.