To add a particles background to WordPress, install the free Animation Kit plugin, open Animation Kit → Background Animation, choose the Particles or Antigravity effect, set your colours and turn it on. It runs behind the whole site, or behind one Group or Cover block. Add a readability overlay for text, and choose what phones get.
Particles or Antigravity?
| Particles | Antigravity | |
|---|---|---|
| Look | A drifting 3D particle cloud | A magnetic field of particles |
| Reacts to the mouse | No | Yes |
| Good for | Calm backdrops, portfolios | Tech and SaaS hero sections |
Both are in Animation Kit's free version. You can watch them move on the demo site first.
Site-wide particles
- Install and activate Animation Kit.
- Open Animation Kit → Background Animation.
- Choose Particles or Antigravity, or start from a look in the looks gallery — there are looks made for white sites.
- Set the particle and background colours to your brand.
- Check the live preview, which uses your theme's real page and text colours.
- Set On phones — a lighter version is a good default.
- Turn the background on and save.
If your theme gives sections a solid background colour, the particles sit behind it. Make those sections transparent where you want particles to show.
Particles behind one section
- Edit the page and select the Group or Cover block — your hero, for example.
- In the block settings, switch on Animated background.
- Pick a look, adjust its colours and add a readability overlay.
- Choose what phones get, then update the page.
Each section can have its own effect and colours, independent of the site-wide background.
Getting the look right
- Low contrast wins. Particles a few shades lighter or darker than the background look premium; bright particles look busy.
- Use the overlay when text sits on top. Tell it whether your text is light or dark and set a strength.
- One effect per page. Particles behind the hero, calm everywhere else.
- Check on a phone and pick the lighter version or a still image if it feels heavy.
Performance and accessibility
The script loads only on pages where a background is on, each effect is its own file loaded after the page is interactive, and animation pauses when the tab is hidden or the background scrolls away. Visitors who prefer reduced motion, use Save-Data or have no WebGL get a still image and download no WebGL code. The canvas never blocks clicks and is hidden from screen readers.
Pro: speed, density and more effects
Animation Kit Pro adds speed, density, scale and pointer controls for every effect, 17 more effects such as Starfield, Dot Grid and Floating Orbs, layered backgrounds and per-page targeting, from $14.99 a year.
More: build an animated hero section, or compare plugins in our animated background round-up.