To put an animated background behind your whole WordPress site, install the free Animation Kit plugin, open Animation Kit → Background Animation, choose one of six effects, set your colours and switch it on. It runs behind every page on any theme. With Pro you can limit it to chosen pages, exclude others, or use different effects on different pages.
Set it up (free)
- Install Animation Kit from Plugins → Add New and activate it.
- Open Animation Kit → Background Animation.
- Choose an effect — Aurora, Antigravity, Particles, Silk, Light Pillar or Radar — or start from a ready-made look in the Looks gallery.
- Set your colours. The live preview uses your theme's real page and text colours, on a light or dark page.
- Add a readability overlay if text sits directly on the background.
- Choose what phones get: full animation, a lighter version, a still image or nothing.
- Switch it on and save.
The free version has no locked controls; everything on the screen works.
Make it visible behind your content
A site-wide background sits behind the page. If your theme or builder paints solid colours on top, you won't see it. Common fixes:
- Block themes: the site background colour from Appearance → Editor → Styles is fine — the animation is drawn above it. What hides it is a solid background on a Group block or template part that fills the page; make those transparent or translucent.
- Elementor and other builders: set section and container backgrounds to transparent (or semi-transparent) where you want the animation to show.
- Cards and text areas: give content boxes a solid or frosted background so they stay readable while the animation shows around them.
A common pattern: animated background visible in the hero and between sections, with content in solid cards on top.
Choosing an effect for every page
A background that's behind every page needs to be calmer than a hero background:
| Effect | Site-wide fit |
|---|---|
| Silk | Excellent — slow and quiet |
| Aurora | Good, especially on dark sites |
| Particles | Good if sparse |
| Antigravity | Better in a hero — it reacts to the pointer |
| Light Pillar | Better as a focal point on landing pages |
| Radar | Better in a hero for data or security sites |
For a white site, start from the light-site looks.
Only some pages, or different effects (Pro)
The free version applies one background to the whole site. Animation Kit Pro adds per-page targeting:
- The front page, the blog, chosen pages and posts, post types, categories, tags, archives, search results and the 404 page.
- Exclusions — for example, everywhere except checkout, cart and account pages.
- Several backgrounds at once, so the homepage can have Aurora and the blog a calm Silk.
- Layering with blend modes, opacity and stacking order.
- Motion, size and interaction controls for every effect.
Without Pro, you can still vary things by using section backgrounds — switch on Animated background on a Group or Cover block — on the pages that need something different.
Speed and accessibility
A site-wide effect runs on every page view, so efficiency matters:
- The front-end script is added only where a background is enabled.
- The rendering code is split per effect and loaded after the page content, so the page appears first.
- The animation pauses when the tab is hidden or the background scrolls out of view.
- Visitors who prefer reduced motion, use Save-Data or have no WebGL get a still image in the same colours, and no WebGL code is downloaded.
- The background layer is hidden from assistive technology and never blocks clicks.
- It includes compatibility rules for WP Rocket, LiteSpeed Cache, Autoptimize, W3 Total Cache and WP Fastest Cache.
Where not to animate
Even with Pro targeting, keep animation off pages where visitors need to concentrate: checkout, forms, long documentation and legal pages. On a free setup, if those pages exist, consider a section background on key pages instead of a site-wide one.
For a single hero instead, see how to add an animated background to a hero section. For Elementor sites, see the Elementor guide. Try every effect live on the Animation Kit demo.