Backgrounds

Aurora Borealis

Three blurred, screen-blended gradient ribbons drift and skew over a near-black background, simulating northern lights in blush, cream, and rose.

csslight complexitymoderate motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →

Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Dark-mode hero backgrounds, creative portfolio pages, space or nature-themed landing sections needing ambient color motion.

When not to

Light-background layouts (background hardcoded near-black). Content-heavy pages where color motion competes with readability.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the ribbon colors to green aurora tones by setting --accent-iris to #00ff88, --accent-cyan to #00e5cc, and --accent-magenta to #00ff44, then slow the first animation to 14s.

Safe to edit

ribbon accent colors (--accent-iris, --accent-cyan, --accent-magenta)
ribbon blur radius (filter:blur(34px))
animation durations (9s, 11s, 13s)
ribbon opacity values (.85, .7, .55)
veil gradient (rgba start at 40%)

Keep intact

mix-blend-mode:screen on ribbons
visibilitychange pause handler
prefers-reduced-motion guard

Known limitations

Background color hardcoded to near-black (#08090d) — must edit CSS to use on light themes
No JS animation state; reduced-motion guard just collapses duration, does not show static fallback

aurorabackgroundgradientambientdarkglowatmospheric

More Backgrounds components

Mesh GradientFour blurred radial blobs in cream, gold, and tan drift and scale on a dark background with screen blend mode, creating a soft animated mesh gradient.
Particle Constellation18–60 lilac/tan/mauve particles drift and bounce; nearby pairs connect with fading lines, forming a shifting constellation network on a dark background.
Film GrainSVG feTurbulence noise jitters over a dark radial-tinted base with scrolling scanlines and a blinking magenta REC dot for an analog film look.
Digital RainCyan katakana and hex glyphs fall in columns down a dark canvas, leaving fading trails; occasional bright white leading chars evoke the Matrix effect.
Layered WavesThree SVG wave layers in iris, cyan, and dark slide horizontally at different speeds over a deep blue-gradient sky, creating a parallax depth effect.
Starfield WarpStars streak outward from center as cyan/purple/blue light trails simulating hyperspace warp. Auto-spawning keeps density constant on any viewport.