How is the aurora effect built without canvas or WebGL?

A few large, softly-shaped div elements are given a strong filter: blur() and a saturated color, then layered over a dark background with mix-blend-mode: screen so overlapping colors add light together instead of covering each other — the blur and blend are what turn simple shapes into a glowing, diffuse light field.

Why mix-blend-mode: screen instead of just semi-transparent colors?

Screen blending lightens colors where layers overlap the way light does (similar to shining two colored spotlights on the same spot), which reads as a genuine glow; plain opacity just dims and grays out the overlap instead of brightening it, which looks flat rather than luminous.

Why does each blob need its own animation delay?

If every blob ran the exact same keyframes on the same timeline, they'd all move in lockstep and the pattern would look mechanical and repeat in an obvious loop; staggering each blob's animation-delay and duration slightly makes their combined motion look organic and non-repeating, closer to how real aurora light drifts.

Will a heavy blur radius slow down the page?

filter: blur() on large, animated elements is one of the more expensive CSS effects to repaint, so on lower-end devices or when used across a full viewport it's worth keeping the blur radius and number of blobs modest, and testing on mobile before shipping it as a full-page background.

Does this respect reduced-motion settings, and is it computed locally?

Yes to both — the drift animations are wrapped in @media (prefers-reduced-motion: reduce) so blobs hold still for visitors who've opted out of motion, and the whole preview and CSS are generated client-side with nothing uploaded.

CSS AURORA BACKGROUND GENERATOR

Drift blurred, glowing color blobs across a dark background and copy the HTML and CSS.

Base background

Aurora blobs

Blob 1

Blob 2

Blob 3

Blur: 60px

Speed: 10s

Blend mode

Presets

HTML

<div class="aurora-bg">
  <span class="aurora-blob aurora-blob-1"></span>
  <span class="aurora-blob aurora-blob-2"></span>
  <span class="aurora-blob aurora-blob-3"></span>
  <div class="aurora-content">Your content here</div>
</div>

CSS

.aurora-bg {
  position: relative;
  overflow: hidden;
  background: #04120f;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
}

.aurora-blob-1 {
  left: -12%;
  top: -15%;
  width: 62%;
  height: 62%;
  background: #00ffb2;
  animation: aurora-drift-1 10s ease-in-out infinite alternate;
  animation-delay: 0s;
}

.aurora-blob-2 {
  left: 42%;
  top: -8%;
  width: 58%;
  height: 58%;
  background: #22e39a;
  animation: aurora-drift-2 13s ease-in-out infinite alternate;
  animation-delay: -1.6s;
}

.aurora-blob-3 {
  left: 8%;
  top: 38%;
  width: 60%;
  height: 60%;
  background: #7cffcb;
  animation: aurora-drift-3 8.5s ease-in-out infinite alternate;
  animation-delay: -0.8s;
}

@keyframes aurora-drift-1 {
  0% { transform: translate(0%, 0%) scale(1); } 50% { transform: translate(14%, -10%) scale(1.15); } 100% { transform: translate(-10%, 10%) scale(0.92); }
}

@keyframes aurora-drift-2 {
  0% { transform: translate(0%, 0%) scale(1); } 50% { transform: translate(-16%, 12%) scale(0.9); } 100% { transform: translate(10%, -8%) scale(1.1); }
}

@keyframes aurora-drift-3 {
  0% { transform: translate(0%, 0%) scale(1); } 50% { transform: translate(10%, 14%) scale(1.1); } 100% { transform: translate(-14%, -6%) scale(0.9); }
}

.aurora-content {
  position: relative;
  z-index: 1;
}

/* Each blob has its own duration multiplier and a negative animation-delay
   so they start mid-cycle and never move in lockstep — intentional. */
@media (prefers-reduced-motion: reduce) {
  .aurora-blob-1 { animation: none; }
  .aurora-blob-2 { animation: none; }
  .aurora-blob-3 { animation: none; }
}

How to build a CSS aurora background

1
Pick a preset or set your own dark base background color.
2
Add aurora-colored blobs and set each one's color.
3
Adjust blur strength for how soft and diffuse the light looks.
4
Set the drift speed for how fast the blobs move.
5
Copy the HTML and CSS — each blob animates independently for a natural, non-repeating drift.

Questions

How is the aurora effect built without canvas or WebGL?: A few large, softly-shaped div elements are given a strong filter: blur() and a saturated color, then layered over a dark background with mix-blend-mode: screen so overlapping colors add light together instead of covering each other — the blur and blend are what turn simple shapes into a glowing, diffuse light field.
Why mix-blend-mode: screen instead of just semi-transparent colors?: Screen blending lightens colors where layers overlap the way light does (similar to shining two colored spotlights on the same spot), which reads as a genuine glow; plain opacity just dims and grays out the overlap instead of brightening it, which looks flat rather than luminous.
Why does each blob need its own animation delay?: If every blob ran the exact same keyframes on the same timeline, they'd all move in lockstep and the pattern would look mechanical and repeat in an obvious loop; staggering each blob's animation-delay and duration slightly makes their combined motion look organic and non-repeating, closer to how real aurora light drifts.
Will a heavy blur radius slow down the page?: filter: blur() on large, animated elements is one of the more expensive CSS effects to repaint, so on lower-end devices or when used across a full viewport it's worth keeping the blur radius and number of blobs modest, and testing on mobile before shipping it as a full-page background.
Does this respect reduced-motion settings, and is it computed locally?: Yes to both — the drift animations are wrapped in @media (prefers-reduced-motion: reduce) so blobs hold still for visitors who've opted out of motion, and the whole preview and CSS are generated client-side with nothing uploaded.