Aurora Borealis Waves

Colours in this gradient

• #020617
• #10b981
• #06b6d4
• #8b5cf6

The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="aurora-wrapper">
  <div class="aurora-sky">
    <div class="aurora-layer a1"></div>
    <div class="aurora-layer a2"></div>
    <div class="aurora-layer a3"></div>
  </div>
  <div class="aurora-content">
    <span class="aurora-badge">Ethereal Motion</span>
    <h1>Northern Lights</h1>
    <p>Pure CSS animated mesh gradients simulating geomagnetic luminescence in the upper atmosphere.</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Create a glowing Aurora Borealis waves background in HTML and CSS.

Requirements:
- Deep night sky background (#020617).
- Multiple blurred radial-gradient layers (emerald, cyan, violet) with heavy blur (filter: blur(60px)).
- Smooth organic keyframe rotation and translation mimicking shifting polar lights.
- Centered typography with gradient clipped text.
- prefers-reduced-motion support.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Layer multiple radial gradient elements with oversized dimensions inside an absolute wrapper.

2. 2

   Apply heavy blur filter on parent container for liquid light diffusion.

3. 3

   Animate layers with varying duration and alternate directions for non-repeating flow.

Customisation tips

• Using inset: -50% ensures blurred edges never clip against the viewport borders.

More backgrounds