Aurora background for a website
Soft bands of green and violet light drifting across a dark sky. The quick CSS aurora used on app sites, what it takes to draw real northern lights curtains, and a skill that builds a full night-sky hero.
Free skills to start. Pro is $79 a year for every skill, or $9.99 a month for 10. See pricing
What is a aurora background?
On the web, "aurora background" means two things. The common one is a dark page with large, blurred blobs of saturated color that drift slowly behind the content, a soft glow rather than a picture. The literal one is the northern lights: tall curtains of light that fold and ripple over a night landscape.
Both say calm, premium and a little magical. The blob version suits SaaS and AI products; the curtain version suits travel, outdoor, sleep, music and anything that wants a sense of place.
How the effect works
The CSS version is three or four radial gradients in bright colors on a pseudo-element, heavily blurred and slowly moved with a transform. Blur hides the shapes so only the mixing light remains, and animating transform keeps it cheap because the browser can move the already-blurred layer.
Real aurora curtains are a shader. Each curtain is a wavy line across the sky whose glow extends upward and fades with height, brightest where the fold turns edge-on to you. Fine vertical rays, noise moving along the curtain and a color shift from green at the hem to violet at the top make it read as the real thing.
01
Start dark
A deep navy or near-black page. Aurora is light, so it needs darkness around it.
02
Place colored glows
Three or four radial gradients in green, cyan and violet, overlapping a little.
03
Blur and drift
filter: blur(40px) or more on the layer, then a slow transform loop of 15 to 30 seconds.
04
Lift the content
Put the aurora on a pseudo-element behind and give the content its own stacking layer.
HTML
A drifting aurora in CSS
Blurred glows on a pseudo-element that drift with a transform, so the browser moves one cached layer. Stops for reduced motion.
<section class="aurora"><h1>Quiet tools for loud ideas</h1></section>
<style>
.aurora {
position: relative; overflow: hidden; isolation: isolate;
min-height: 70vh; display: grid; place-items: center;
background: #050816; color: #fff;
font: 700 clamp(36px, 7vw, 72px)/1.05 system-ui; text-align: center;
}
.aurora::before {
content: ''; position: absolute; inset: -40%; z-index: -1;
background:
radial-gradient(40% 22% at 30% 42%, rgb(52 255 170 / 0.55), transparent 70%),
radial-gradient(34% 28% at 66% 34%, rgb(130 90 255 / 0.5), transparent 70%),
radial-gradient(28% 18% at 52% 60%, rgb(0 200 255 / 0.4), transparent 70%);
filter: blur(48px);
animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
to { transform: translate3d(6%, -4%, 0) rotate(10deg) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { .aurora::before { animation: none; } }
</style>A starting point written for this page, free to use in your own projects. The skills below build the finished version with checks, fallbacks and a recorded video.
What to get right on a real page
01
Animate transform, not the gradients
Changing gradient positions forces a full repaint and re-blur every frame. Moving the blurred layer with transform does not.
02
Watch the brightest moment
As the glow drifts behind the headline, check contrast at its brightest point, not its average.
03
Use few colors
Two or three hues read as light. Five read as a rainbow.
04
Hold still on request
Respect prefers-reduced-motion: show one finished frame instead of the loop. A visitor who turned motion off still gets the look.
Skills that build a aurora background
The literal northern lights: a finished night-sky hero with your copy and a 1080p video.
- Aurora Curtain HeroClaude CodeCodexCursor+3 more agents
Motion Heroes · Pro
Aurora Curtain Hero
Animated WebGL hero · page + embed + 1080p video
Aurora curtains over a snowy mountain range: their hems fold and swing, glow brightest where they turn edge-on and shimmer with fine rays, green at the hem fading to violet. Stars twinkle, the aurora lights the snow, a frozen lake mirrors the sky and a pine treeline stands in front.
Worth knowing: The build only accepts a dark night background.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Aurora Curtain Hero makes
Install
Build a aurora background with your agent
Each skill is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses Aurora Curtain Hero; each skill page has its own prompt.
1. Paste the install prompt
Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.
Install the "Aurora Curtain Hero" skill from Lookbk (https://lookbk.dev/skills/aurora-curtain-hero). 1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add aurora-curtain-hero 2. If it prints a sign-in link, show it to me. When I say I approved it, run the same command again. 3. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.
Or run it in a terminal
curl -fsSL https://lookbk.dev/cli.js | node - add aurora-curtain-hero2. Start a new session
Agents load skills when a session starts. The installer writes the folder where your agent looks:
- Claude Code
- ~/.claude/skills/aurora-curtain-hero
- Codex
- ~/.agents/skills/aurora-curtain-hero
- Cursor
- ~/.agents/skills/aurora-curtain-hero
3. Ask for the result
Describe it in plain words, for example:
Build an Aurora Curtain hero for Kaamos Cabins, our glass cabins in Lapland: navy night, mint-green aurora fading to violet, headline 'We wake you when the sky moves.', our coordinates and Kp index in the corner, and record a 12-second loop for Instagram.
Another agent? Install a skill in any agent
FAQ
Questions
Still stuck? The guides cover installing, agents and licensing in more detail.
Read the guidesHow do I make an aurora background in CSS?
Put three or four blurred radial gradients in green, cyan and violet on a pseudo-element behind your content and move it slowly with a transform animation, as in the starter on this page.
How do I make a northern lights animation?
Draw wavy curtains across the sky in a shader, extend their glow upward with a fade, add fine vertical rays and move noise along them. Aurora Curtain Hero does this over a generated landscape.
Is a blurred aurora heavy on performance?
A large blur is costly to compute but cheap to move. Blur once on a single layer and animate only its transform, and keep the blurred area no bigger than it needs to be.
Can I use an aurora as a video background?
Yes. Aurora Curtain Hero records a seamless 1080p MP4 and a poster of the same sky.