To add an aurora background in WordPress, install the free Animation Kit plugin, select your hero's Group or Cover block, switch on Animated background and choose Aurora. Set two or three colours — greens, teals and violets for classic northern lights, or your brand palette — add the readability overlay, and choose what phones get. For the whole site, use Animation Kit → Background Animation instead.
Why an aurora background
The aurora look — soft bands of colour drifting across a dark sky — has become a favourite for SaaS, AI, crypto and creative-agency sites. It adds depth and motion without competing with your headline the way particles or a video can. Done in pale tones, it also works as a gentle wash on light sites.
Animation Kit's free Aurora effect draws it live with WebGL: no video file, no image sequence, and your own colours.
Behind a hero section
- Install Animation Kit from Plugins → Add New and activate it.
- Edit your homepage and select the hero's Group or Cover block.
- In the block settings, switch on Animated background.
- Choose Aurora, then set the colours (below).
- Add the readability overlay — a colour and strength over the effect — so your headline stays crisp.
- Under On phones, pick full animation, a lighter version, a still image or nothing.
- Update the page and check it on desktop and a phone.
Each section gets its own effect and colours, so you can use Aurora in the hero and something else further down.
Behind the whole site
- Open Animation Kit → Background Animation.
- Choose Aurora, or start from a ready-made look in the Looks gallery.
- Set your colours and check the live preview, which uses your theme's real page and text colours on a light or dark page.
- Switch it on and save.
Copy look / Paste look moves the same aurora to a block, another background or another site.
Palettes that work
| Mood | Colours | Page |
|---|---|---|
| Classic northern lights | Deep teal, green, violet | Very dark navy or black |
| Tech / AI | Indigo, cyan, magenta | Near-black |
| Warm sunset | Coral, amber, rose | Dark plum |
| Calm brand wash (light site) | Pale lavender, mint, sky blue | White |
| Single-brand | Your brand colour + one lighter and one darker shade | Dark or light to match |
Tips:
- Two or three colours look like an aurora; five look like a rainbow.
- Dark sites: keep the page background very dark so the colours glow.
- Light sites: keep every colour pale. Start from Animation Kit's light-site looks.
Keep text readable
An aurora drifts, so contrast changes over time. Check the brightest moment, not just the first frame:
- Use the readability overlay — a dark overlay at 20–40% on dark sites, a light one on light sites.
- Keep headings bold and large.
- Avoid putting long paragraphs on top; aurora heroes work best with a short headline and one button.
Phones, motion and speed
- Phones: the On phones setting can serve a lighter lower-resolution version, a still image in the same colours, or nothing.
- Reduced motion: visitors who prefer reduced motion — and those on Save-Data or without WebGL — get a still image, and no WebGL code is downloaded for them.
- Speed: the script loads only where a background is enabled, the effect's code is loaded after the page content, and the animation pauses when the tab is hidden or the section is scrolled out of view.
- Clicks: the background layer never blocks links, forms or menus.
Want more control? (Pro)
Animation Kit Pro adds:
- Soft Aurora, a gentler variant, and 16 more effects.
- Motion and size controls — slow the aurora down, make the bands larger, change pointer response.
- Layered backgrounds with blend modes — for example, Aurora with Starfield on top for a night-sky effect.
- Per-page targeting — Aurora on the homepage, something calmer on the blog.
- CSS-selector targeting for Elementor and other builders.
It starts at $14.99 a year. See every effect moving on the Animation Kit demo.
For other effects and how they compare, see the animated hero background guide and animated vs video backgrounds.