To add an animated background in Elementor, install the free Animation Kit plugin, choose an effect under Animation Kit → Background Animation and turn it on — it runs behind every page, Elementor included. Make the sections where it should show transparent. To animate just one Elementor section, give it a CSS class and target it with Animation Kit Pro.
Option 1: behind the whole site (free)
- Install and activate Animation Kit.
- Open Animation Kit → Background Animation (in the WordPress dashboard, not inside Elementor).
- Choose one of the six free effects — Aurora, Antigravity, Particles, Silk, Light Pillar or Radar — or a look from the gallery.
- Set the colours and a readability overlay.
- Set On phones to a lighter version or a still image.
- Turn it on and save.
Then in Elementor, open the sections where the background should show and set Style → Background to none, or a semi-transparent colour. Opaque sections hide it, which is useful: you can let it show only behind the hero and footer.
Option 2: one section only (Pro)
- In Elementor, select the container or section → Advanced → CSS Classes →
ak-hero. - Make the section's own background transparent and update.
- In Animation Kit, create a background and set its target to the CSS selector
.ak-hero(Pro). - Choose the effect, colours, overlay and phone setting, then save.
The same method works for Bricks and WPBakery sections.
Compared with Elementor addons
| Animation Kit | Marvy (Lite) | Premium Addons | |
|---|---|---|---|
| Works outside Elementor | Yes | No | No |
| Site-wide background, free | Yes | — | — |
| One section | Pro (CSS selector) | Free | Pro (Particles / Animated Gradient) |
| Phones: lighter / still / off | Free | — | — |
| Still image for reduced motion | Yes | Not stated | Not stated |
| Effects | 6 WebGL effects free, 23 in Pro | About 10 animation styles | Particles, gradients |
Sources: Marvy, Premium Addons, as of October 25, 2026. Disclosure: WPXERO makes Animation Kit (version 0.5.0).
Tips for Elementor sites
- Clear the cache after enabling a background. Animation Kit ships compatibility filters for WP Rocket, LiteSpeed Cache, Autoptimize, W3 Total Cache and WP Fastest Cache; with another cache plugin, exclude
wpxero-animation-kit/build/from JavaScript optimisation. - Keep text contrast with the overlay — the preview warns about dark text on dark backgrounds.
- Use one animated area per page.
- Elementor motion effects still work — the canvas sits behind your content and never blocks clicks.
Pricing
Animation Kit Pro — CSS-selector targeting, per-page targeting, layered backgrounds, motion controls and 17 more effects — starts at $14.99 a year or $49.99 lifetime.
More guides: an animated hero section, a particles background and animated vs video backgrounds.