Aurora Flow

Gradients

Description

Realistic aurora borealis with tall vertical ray curtains hanging from an undulating bright arc, height-graded color, and a twinkling night sky.

What is the aurora background?

Aurora Flow is a free aurora background that renders in real time with WebGL, so it stays sharp on any screen without shipping a heavy video file or GIF — and it pauses while off-screen to keep pages fast.

Use it as visual inspiration for a hero or section background on a landing page, portfolio, SaaS site or app. Every parameter — colors, speed and intensity — is adjustable in the remix playground. No account is needed to preview it.

Make it yours

Every knob below is tuned by the AI to match your design — or ask for changes in plain language, like “slower and more blue.”

colorsPalette

Height-graded curtain palette: first = bright lower rim, middle = mid-ray, last = faint ray tips (2-5 stops)

bgPalette

Night-sky base color behind the curtains

bg-alpha0–1

Background opacity; 0 floats the aurora transparently over the host section and hides the stars

speed0.05–2

Overall motion rate; low values give the slow, majestic drift of a real aurora

softness0–1

Ray and rim diffusion: low = sharp needle striations and crisp lower border, high = dreamy glow

ribbons1–5

Number of overlapping curtain layers at different depths and brightness

angle-45–45

Tilt of the arc across the sky in degrees

amplitude0.05–1

Undulation depth of the arc's serpentine sweep

scale0.5–4

Feature density: higher = finer striations and tighter waves

contrast0.5–3

Striation punch: higher carves brighter filaments against darker gaps

grain0–0.2

Film grain amount layered over the banding dither

y-focus0–1

Vertical position of the bright arc (0 = bottom, 1 = top); rays rise above it, soft glow bleeds below

Frequently asked questions

Yes. You can preview the aurora background for free in the AIDesigner effects library — no watermark and no sign-up required to try it.

Use "Remix this effect" to tune the colors, speed, and parameters, then use the preview as a reference for your website background implementation.

It renders on the GPU through WebGL at a capped frame rate, so it is far lighter than a background video and automatically stops drawing when it scrolls out of view — keeping load and battery impact low.

Yes. Every knob in the "Make it yours" section is adjustable, and you can also just ask the AI in plain language — for example "slower and more blue" — and it retunes the aurora background to match.

More effects

View all