AURORA

Live aurora background, plain CSS, your own code. Tap a variant — the colours change, the motion stays. Tap Show code to copy the whole trick.

Show code

/* Aurora — paste this into any page, change the 4 colours, done.
   No library, no subscription, no ThreeUI. */
.aurora{position:fixed;inset:-20%;width:140%;height:140%;overflow:hidden;background:#050508}
.blob{position:absolute;width:55vmax;height:55vmax;border-radius:50%;
  filter:blur(70px);opacity:.65;mix-blend-mode:screen;will-change:transform}
.b1{background:radial-gradient(circle,#ffd700,transparent 65%);top:-10%;left:-5%;animation:drift1 28s ease-in-out infinite alternate}
.b2{background:radial-gradient(circle,#00e5ff,transparent 65%);top:20%;right:-10%;animation:drift2 34s ease-in-out infinite alternate}
.b3{background:radial-gradient(circle,#ff2d95,transparent 65%);bottom:-15%;left:20%;animation:drift3 26s ease-in-out infinite alternate}
.b4{background:radial-gradient(circle,#7b2dff,transparent 65%);top:35%;left:35%;animation:drift1 38s ease-in-out infinite alternate-reverse}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(12vw,-8vh) scale(1.25)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-14vw,10vh) scale(.9)}}
@keyframes drift3{from{transform:translate(0,0) scale(.95)}to{transform:translate(10vw,12vh) scale(1.2)}}
<div class="aurora"><div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div><div class="blob b4"></div></div>