Aurora Backgrounds

An aurora is a soft field of colored light that drifts slowly behind your content. It gives heroes and feature panels a premium, ambient feel without a busy image. The glow lives on pseudo-elements, so your content sits cleanly on top.

#Aurora panel

<div class="s-aurora" style="text-align:center">
  <p style="margin:0; font-family:var(--font); font-size:1.6rem; font-weight:800; letter-spacing:-.02em">Reach the summit</p>
  <p style="margin:.5rem auto 0; max-width:34ch; opacity:.85">A calm, drifting glow behind a clear message.</p>
  <button class="s-btn" style="margin-top:1.1rem">Get started</button>
</div>

#As a hero background

Put anything inside: a headline, a form, a call to action. The color field moves on its own.

<section class="s-aurora">
  <h1>Your headline here</h1>
  <p>Supporting copy that stays crisp on top of the glow.</p>
  <button class="s-btn">Primary action</button>
</section>

#Notes

• The glow uses two blurred, animated radial shapes on ::before and ::after. It runs on the compositor and pauses under prefers-reduced-motion.
• The panel commits to one fixed dark surface with light text in both light and dark themes, so the glow always reads and the copy stays legible. Recolor the two shapes in techniques.css to match your brand.
• For a foreground surface over a busy backdrop, use Matte Glassmorphism instead.