An aurora background in CSS that stays fast

An aurora is a field of soft colour behind the interface, like light through fog. Done well, it gives a dark UI depth and something for glass surfaces to blur. Done badly, it is a lava lamp that drains the battery.

The static version

.aurora {
  position: fixed;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(40% 35% at 25% 30%, oklch(55% 0.2 295 / 0.45), transparent 70%),
    radial-gradient(35% 30% at 75% 20%, oklch(80% 0.18 130 / 0.18), transparent 70%),
    radial-gradient(50% 40% at 60% 80%, oklch(45% 0.15 270 / 0.35), transparent 70%),
    var(--ink-950);
  pointer-events: none;
}

Two or three gradients in your brand's hues, low opacity, with large soft falloff. The negative inset gives room to move it without exposing edges.

Animate it cheaply

@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) rotate(0deg); }
  to   { transform: translate3d(2%, 1%, 0) rotate(4deg); }
}
.aurora { animation: drift 30s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .aurora { animation: none; } }

Animate transform, which the browser can do on its own layer, rather than background-position, which repaints. Keep it slow: thirty seconds or more per cycle. Movement you notice is too much. More on motion in prefers-reduced-motion.

Keep it quiet under text

• Brightest areas away from where headlines and body text sit.
• Text on glass cards with enough fill, as in glassmorphism that looks expensive.
• A faint grain over it, which hides banding in the gradients; see a grain texture in CSS.

Banding

Large, subtle gradients on dark grounds can show visible steps on some screens. A grain overlay at very low opacity breaks them up. So does keeping the gradients' colours close in lightness.

The aurora and the grain are both recipes in Glass Instrument UI, in its violet and lime palette, written from the live traders-zone.in field, so Claude builds the background the same way on every page.