Aurora Gradient Background
Soft blurred color blobs drifting like an aurora behind text — a popular hero backdrop.
<div class="aur"><div class="aur-blob a1"></div><div class="aur-blob a2"></div><div class="aur-blob a3"></div><h2>Aurora</h2></div>body{background:#0a0a14}
.aur{position:relative;width:340px;height:220px;border-radius:22px;overflow:hidden;display:grid;place-items:center;background:#0a0a14}
.aur-blob{position:absolute;width:200px;height:200px;border-radius:50%;filter:blur(50px);opacity:.7}
.a1{background:#7b2ff7;top:-40px;left:-30px;animation:au 8s ease-in-out infinite}
.a2{background:#ff477e;bottom:-50px;right:-20px;animation:au 10s ease-in-out infinite reverse}
.a3{background:#00d4ff;top:40px;right:40px;animation:au 7s ease-in-out infinite}
.aur h2{position:relative;color:#fff;font:800 36px/1 system-ui,sans-serif;letter-spacing:1px;z-index:1}
@keyframes au{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,30px) scale(1.2)}66%{transform:translate(-30px,20px) scale(.9)}}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.