Aurora Wave Curtain Flow

Colours in this gradient

• #020617
• #10b981
• #8b5cf6
• #ec4899

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="curtain-stage">
  <div class="curtain-wrap">
    <div class="c-ribbon cr-1"></div>
    <div class="c-ribbon cr-2"></div>
    <div class="c-ribbon cr-3"></div>
  </div>
  <div class="curtain-vignette"></div>
  <div class="curtain-content">
    <div class="curtain-badge">Polar Convection</div>
    <h1>Aurora Curtains</h1>
    <p>Vertical atmospheric particle streams oscillating across geomagnetic field lines.</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 vertical aurora curtain wave background in pure HTML and CSS.

Requirements:
- Vertical linear gradient pillars fading into transparency at the base.
- Heavy blur filter (filter: blur(70px)) diffusing lights into radiant curtains.
- Gentle alternating oscillation animations.
- Dark edge vignette.
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Layer vertical gradient ribbons using linear-gradient(180deg, color, color2, transparent).

2. 2

   Apply filter: blur(70px) on wrapper.

3. 3

   Animate vertical sway and rotation.

Customisation tips

• Vertical curtains of light create high aesthetic grandeur behind hero text.

More backgrounds