Aurora gradient
Soft blurred colour clouds drift slowly behind content, like northern lights.
CSSIntermediate
<div class="aurora" aria-hidden="true"><div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div></div>
<h1>Aurora</h1>body{background:#140807;overflow:hidden}
.aurora{position:fixed;inset:0;overflow:hidden;z-index:0}
.blob{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(80px);opacity:.55;will-change:transform}
.b1{background:#8a3a22;left:-15vmax;top:-20vmax;animation:d1 22s ease-in-out infinite alternate}
.b2{background:#a8523a;right:-20vmax;top:5vmax;animation:d2 26s ease-in-out infinite alternate}
.b3{background:#d98a8a;left:15vmax;bottom:-30vmax;animation:d3 30s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(35vmax,20vmax) scale(1.2)}}
@keyframes d2{to{transform:translate(-30vmax,25vmax) scale(.9)}}
@keyframes d3{to{transform:translate(30vmax,-20vmax) scale(1.15)}}
h1{position:relative;z-index:1;margin:0;font-size:clamp(2.2rem,9vw,4rem);letter-spacing:-.03em;text-align:center}
@media (prefers-reduced-motion:reduce){.blob{animation:none}}<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Aurora gradient</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
body{background:#140807;overflow:hidden}
.aurora{position:fixed;inset:0;overflow:hidden;z-index:0}
.blob{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(80px);opacity:.55;will-change:transform}
.b1{background:#8a3a22;left:-15vmax;top:-20vmax;animation:d1 22s ease-in-out infinite alternate}
.b2{background:#a8523a;right:-20vmax;top:5vmax;animation:d2 26s ease-in-out infinite alternate}
.b3{background:#d98a8a;left:15vmax;bottom:-30vmax;animation:d3 30s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(35vmax,20vmax) scale(1.2)}}
@keyframes d2{to{transform:translate(-30vmax,25vmax) scale(.9)}}
@keyframes d3{to{transform:translate(30vmax,-20vmax) scale(1.15)}}
h1{position:relative;z-index:1;margin:0;font-size:clamp(2.2rem,9vw,4rem);letter-spacing:-.03em;text-align:center}
@media (prefers-reduced-motion:reduce){.blob{animation:none}}
</style></head>
<body>
<div class="aurora" aria-hidden="true"><div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div></div>
<h1>Aurora</h1>
</body></html>Good for
Hero backgrounds and dark sections. Keep it slow (20 to 30 seconds per loop).
Watch out for
Blur is costly. Use a few large layers, not many small ones, and pause or simplify on low-power devices.
Accessibility
Wrap motion in @media (prefers-reduced-motion: reduce) and switch it off or shorten it for people who ask for less movement.