To add an animated background to a WordPress hero section, install the free Animation Kit plugin, select the hero's Group or Cover block and switch on Animated background in its settings. Choose an effect such as Aurora or Silk, set your colours, add a readability overlay and pick what phones get — no video file, no code.
Why animate the hero
A hero is the one place where motion earns attention. A subtle animated background makes a page feel alive without the weight of a video — and because it's drawn in the browser, you can change its colours any time.
Step by step
- Install and activate Animation Kit.
- Edit the page and select the Group or Cover block that holds your hero. (No hero yet? Insert a Cover block, add a heading, a paragraph and a button.)
- In the block settings sidebar, switch on Animated background.
- Pick a look from the gallery or choose an effect.
- Set the colours to match your brand.
- Add a readability overlay: choose whether your text is light or dark and set the strength.
- Under On phones, choose full, lighter, still image or nothing.
- Update the page and view it in a new tab.
Choose the right effect
| Effect | Feel | Best for |
|---|---|---|
| Aurora | Flowing colour washes | Portfolios, creative agencies, night-mode brands |
| Silk | Slow fabric-like folds | Premium, calm brands |
| Particles | Drifting 3D cloud | General-purpose backdrop |
| Antigravity | Particles that react to the pointer | Tech and SaaS |
| Light Pillar | A column of light | Dark landing pages |
| Radar | A sweeping radar | Data and security products |
All six are free. On a white site, start from the Light sites looks.
Hero checklist
- Headline and button readable in the preview — adjust the overlay if not.
- Effect stays behind the content. The canvas never blocks clicks, so links and forms work through it.
- Phones get the lighter version unless the full effect runs smoothly on a mid-range phone.
- Reduced motion — visitors who ask for it see a still image automatically.
- One animated section per page. Let the rest of the page be calm.
Free vs Pro
| Free | Pro | |
|---|---|---|
| Animated Group / Cover blocks | Yes | Yes |
| 6 effects in your colours | Yes | 23 effects |
| Readability overlay, On phones setting | Yes | Yes |
| Speed, density, scale and pointer controls | — | Yes |
| Several layered backgrounds with blend modes | — | Yes |
| Animate a section built with Elementor, Bricks or WPBakery | — | Yes, by CSS selector |
Animation Kit Pro starts at $14.99 a year or $49.99 lifetime.
Next: animated vs video backgrounds, a particles background, or our animated background plugin round-up.