Animation Kit is a free WordPress plugin that adds an animated background to your whole site or to a single section. Pick an effect (an aurora wash, drifting particles, silk folds, a column of light, a radar sweep), set your brand colors and switch it on from one admin screen. No shortcode, no CSS,
PricingFree downloadThe WordPress.org download is free. Pro versions, add-ons or external services may cost extra.
CompatibilityRequires WordPress 6.0 and PHP 7.4.
SourceWordPress plugins · Oct 22, 2026
01 / Source details
Aboutthistool.
Animation Kit is a free WordPress plugin that adds an animated background to your whole site or to a single section. Pick an effect (an aurora wash, drifting particles, silk folds, a column of light, a radar sweep), set your brand colors and switch it on from one admin screen. No shortcode, no CSS, no video file, no theme editing.
See every effect live | Compare Free and Pro
Animation Kit at a glance
What it is: an animated background plugin for WordPress. It draws a moving WebGL canvas behind your content.
Where it runs: behind the whole site, or behind one Group or Cover block such as a hero section.
Free effects: 6 (Aurora, Antigravity, Particles, Silk, Light Pillar, Radar), each in your own colors.
Setup time: about a minute. Pick an effect or a ready-made look, then save.
Works with: any classic or block theme, the block editor, Elementor, Bricks, WPBakery and other page builders.
Performance: nothing loads until a background is enabled, and each effect is its own lazy-loaded file.
Accessibility: visitors who prefer reduced motion get a still image, and the layer never blocks clicks.
Price: free. Animation Kit Pro is an optional add-on with 17 more effects, motion controls, layered backgrounds and per-page targeting.
What you get for free
The free plugin has no locked or disabled controls. Everything you see in it works.
6 animated background effects with full color control.
Site-wide background: one background behind every page.
Section backgrounds: switch on Animated background for any Group or Cover block to animate just a hero or a call-to-action band. Each section has its own effect and colors.
Looks gallery: ready-made effect and palette combinations, including looks made for light (white) sites.
Readability overlay: a color and a strength laid over the effect so text on top stays legible.
On phones: choose per background what phones get: full animation, a lighter version, a still image, or nothing.
Live preview on your theme’s real page and text colors, on a light or dark page.
Copy look / Paste look: move a background’s look to another background, a block or another site.
How to add an animated background in WordPress
01Install and activate Animation Kit, then open Animation Kit → Background Animation .
02Choose one of the 6 free effects, or start from a look.
03Set the colors, check the live preview and turn the background on. It appears on your site.
For one section only: select a Group or Cover block in the editor, open the block settings and switch on Animated background .
Effects included in the free version
Aurora: flowing color washes. Suits portfolios, creative agencies and night-mode brands.
Antigravity: a magnetic particle field that reacts to pointer movement. Good for tech and SaaS hero sections.
Particles: a drifting 3D particle cloud in your brand colors.
Silk: slow, fabric-like folds. Calm and premium.
Light Pillar: a vertical column of light. A focal point for dark landing pages.
Radar: a sweeping radar visualization for data, security and tech layouts.
Watch them move on the demo site .
When you will want Pro
Most sites start with the free plugin and stay there. These are the points where people upgrade:
“I want a different background on my homepage than on the rest of the site.” 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, plus exclusions.
“The effect is right, but it is too fast, too dense or too large.” Pro adds motion, size and interaction controls for every effect, including the 6 free ones: speed, density, scale, pointer response.
“I build with Elementor or Bricks and want one section animated.” Pro adds CSS-selector targeting, which puts a background inside any element on any page builder.
“I want to combine two effects.” Pro adds several backgrounds at once, layered, each with its own opacity, stacking order and blend mode.
“The effect I want is not in the free six.” Pro adds 17 more: Color Bends, Dot Grid, Evil Eye, Floating Lines, Floating Orbs, Gradient Blinds, Grainient, Grid Scan, Iridescence, Light Rays, Line Waves, Liquid Ether, Pixel Blast, Plasma, Prism, Soft Aurora and Starfield.
Try all 23 effects on the demo before you decide.
Free vs Pro
Animation Kit Pro is a separate add-on that installs next to the free plugin. The free plugin stays fully usable without it.
Free
6 background effects in your own colors
One site-wide background
Section backgrounds on Group and Cover blocks
Looks for the free effects, Copy look / Paste look
Readability overlay and the On phones setting
Still image for reduced-motion, Save-Data and no-WebGL visitors
Pro adds
17 more effects (23 in total)
Motion, size and interaction controls for every effect
Several backgrounds at once, layered with blend modes
Per-page targeting and page exclusions
CSS-selector targeting for page builders
Position, z-index and opacity for each background
Priority support
Upgrading is safe. Pro uses the same settings, so everything you built in the free version stays. If a Pro license later ends, your Pro settings are kept, not deleted, and come back when the license does.
See plans and pricing
Use cases
Hero sections that need motion without an animated video.
Landing pages with a moving backdrop behind a call to action.
Portfolio and agency sites that want a signature visual.
SaaS and product pages, with Antigravity, Radar or Light Pillar behind a headline.
Conference, course and event sites that want a “live” feel.
Dark-mode marketing pages where Aurora or Light Pillar adds depth.
Performance and Core Web Vitals
The front-end script is only added to pages where a background is enabled.
The rendering code (Three.js, OGL and each effect’s shader) is split into separate files, loaded on demand after DOMContentLoaded . Visitors download the code for the effect you chose, not all of them.
Animations pause when the tab is hidden or the background scrolls out of view.
The On phones setting gives phones full animation, a lighter lower-resolution version, a still image in the same colors, or nothing.
Visitors who prefer reduced motion, use Save-Data, or have no WebGL get the still image, and no WebGL code is downloaded for them.
Compatibility filters are registered for WP Rocket , LiteSpeed Cache , Autoptimize , W3 Total Cache and WP Fastest Cache , so their delay-JS, combine-JS and minify rules don’t break the lazy-loaded files.
Accessibility
The canvas wrapper is aria-hidden="true" and pointer-events: none — assistive technology ignores it, and visitors click links, forms and menus through it.
prefers-reduced-motion: reduce is honored: those visitors get a still image in the background’s colors and no WebGL code is downloaded. The preference is read when the page loads, so a change applies on the next page.
The readability overlay and the light-site check in the preview help you keep text contrast when a background sits behind content.
External services
Animation Kit includes the Freemius SDK, which handles the optional Pro license and, only if you agree, usage diagnostics.
Nothing is sent to Freemius unless you choose Allow & Continue on the opt-in screen. Skipping it keeps the plugin fully functional.
If you opt in, Freemius receives your site URL, WordPress and PHP versions, the plugin version, and your admin name and email, so we can send security and feature updates.
Opening the Upgrade / pricing page inside the admin loads the checkout from freemius.com.
Service provider: Freemius, Inc. — Terms of Service , Privacy Policy .
Background effects themselves run entirely in the visitor’s browser. No visitor data is collected or sent anywhere.
See it in action
Screenshots & previews.
Aurora, a free effect, behind an example hero section. The background is the plugin's real output; the page content is sample text.The Background Animation screen: your backgrounds, a live preview and the effect picker.The 6 free effects: Aurora, Antigravity, Light Pillar, Silk, Radar and Particles.The looks gallery: ready-made effect and color combinations, filtered by mood.A section background in the block editor: the Animated background panel on a Group block.Readability overlay and the On phones setting for a background.Pro: all 23 effects. The 6 free ones plus the 17 that come with Animation Kit Pro.Pro: several backgrounds, each shown on the pages you choose.
02 / Source details
Gettingstarted.
01In Plugins → Add New , search for “Animation Kit”, then install and activate it. Or upload the ZIP from wordpress.org/plugins/wpxero-animation-kit.
02Open Animation Kit → Background Animation .
03Pick an effect or a look, set its colors, turn it on and save.
04Open your site in a private window to see it as a visitor.
To animate one section instead, edit a page, select a Group or Cover block and switch on Animated background in the block settings.
03 / Source details
Frequently asked questions.
What is Animation Kit?
Animation Kit is a WordPress plugin that adds animated WebGL backgrounds behind a whole site or a single section. The free version includes 6 effects: Aurora, Antigravity, Particles, Silk, Light Pillar and Radar. It is configured from one admin screen and needs no code.
How do I add an animated background in WordPress without coding?
Install and activate Animation Kit, open Animation Kit → Background Animation , pick an effect or a ready-made look, set its colors and turn it on. There is no shortcode to paste, no widget to place and no template to edit.
Is there a free animated background plugin for WordPress?
Yes. Animation Kit on WordPress.org is free and has no locked controls: 6 effects with your own colors, a site-wide background, section backgrounds on Group and Cover blocks, the looks gallery, the readability overlay and the On phones setting. Animation Kit Pro is an optional paid add-on.
How do I add a particles background to WordPress?
Choose Particles (a drifting 3D particle cloud) or Antigravity (particles that react to the pointer) in Animation Kit → Background Animation , set the particle and background colors, and turn the background on. Both effects are in the free version.
How do I add an animated background to a hero section only?
In the block editor, select the Group or Cover block that holds your hero and switch on Animated background in its settings sidebar. Pick a look, adjust its colors, add a readability overlay and choose what phones get. This is free and independent of the site-wide background.
How do I add an animated background to an Elementor section?
The site-wide background works behind any Elementor page in the free version. To animate one specific Elementor, Bricks or WPBakery section, point a background at that section’s CSS selector, which is a Pro feature. There is no Elementor widget.
Is an animated background better than a video background?
It avoids the video file. An animated background is drawn in the visitor’s browser by a small script, so there is no video to host, compress or download, and you can change its colors at any time. Like any animation it uses the device’s GPU, which is why Animation Kit lets you serve a lighter version or a still image on phones.
What is the difference between Free and Pro?
Free: 6 effects with your own colors, one site-wide background, and section backgrounds on Group and Cover blocks. Pro: 17 more effects (23 in total), motion and size controls for every effect, several layered backgrounds, per-page and CSS-selector targeting, position / z-index / opacity / blend mode, and priority support. See the Free vs Pro section above.
Do I lose my settings if I upgrade to Pro, or if my Pro license ends?
No. Pro installs alongside the free plugin and uses the same settings. If a license ends, Pro-only settings are stored but not applied, and your site falls back to what the free version can show. Renewing brings them back.
Can I show a different background on different pages?
That is a Pro feature. Pro lets you create several backgrounds and decide where each one runs: the front page, the blog, chosen pages or posts, post types, categories, tags, archives, search results or the 404 page. The free version shows one background on every page, plus any section backgrounds you add to individual blocks.
Can I use my own brand colors?
Yes, in the free version. Every effect takes your own colors, and the looks gallery gives you ready-made palettes to start from.
Does it work with Elementor, Gutenberg, Bricks and WPBakery?
Yes. The site-wide background is drawn at the document level, so it sits behind whatever those builders output. In the block editor you can also animate a single Group or Cover block.
Will an animated background slow down my site or hurt PageSpeed?
The script only loads on pages where a background is enabled, and the rendering code is split per effect and loaded after the page is interactive. You choose per background what phones get (full, lighter, still image or hidden), and reduced-motion, Save-Data and no-WebGL visitors always get a still image. Like any WebGL animation, a full-quality effect on a weak device still costs GPU time; the lighter and still-image options exist for that.
Does the animated background work on mobile?
Yes. For each background you choose what phones get: the full animation, a lighter lower-resolution version, a still image in the same colors, or nothing.
Will it break with my caching plugin?
Compatibility filters ship for WP Rocket, LiteSpeed Cache, Autoptimize, W3 Total Cache and WP Fastest Cache. The scripts are excluded from delay, combine and minify rules so the lazy-loaded files resolve correctly. With another cache plugin, exclude wpxero-animation-kit/build/ from JavaScript optimization.
Is the text on top of the background still readable?
Use the readability overlay: tell the plugin whether your text is light or dark, and set an overlay strength. The preview shows your theme’s own page and text colors and warns when a background puts dark behind dark text.
Does the canvas block clicks, focus or scrolling?
No. pointer-events: none is set on the wrapper, so clicks pass through to your content, and the wrapper is aria-hidden="true" for screen readers.
Does it respect prefers-reduced-motion?
Yes. Visitors with the reduced-motion preference get a still image in the background’s own colors, and no WebGL code is downloaded. The preference is checked when the page loads.
Which effect should I choose?
Aurora and Silk are calm and suit most sites. Antigravity and Particles add movement that reacts to the visitor. Light Pillar and Radar are strong focal points for dark landing pages. On a white site, start from the Light sites looks.
How do I uninstall cleanly?
Settings are stored in two options ( animation_kit_settings and animation_kit_background_settings ). Deactivating keeps them. Deleting the plugin from the Plugins screen runs uninstall.php , which removes both options and the plugin’s transients on every site of a multisite network.
Website LLMs.txt and LLMs-Full.txt Generator is an LLMs.txt generator and llms-full.txt generator for WordPress. It helps site owners generate, manage, preview, validate, and serve AI discovery files from published public content. Use it to create structured /llms.txt and optional /llms-full.txt end
EngageDock AI is a customizable floating contact widget for WordPress websites that want more leads and faster visitor communication. It helps small businesses turn website traffic into calls, texts, emails, and callback requests from one clean contact panel. Key Features: Click-to-Call – One tap ca
Altify AI is an auto ALT text and AI ALT text plugin for WordPress images. It helps generate descriptive image ALT text for accessibility and image SEO. Use bulk image ALT text tools for your Media Library, generate featured image ALT text automatically, and scale WooCommerce image ALT updates with
The Accepted Payment Methods plugin is a straightforward, lightweight solution that enhances your website by displaying visually appealing icons of the payment methods you accept. This plugin is ideal for a variety of websites, including e-commerce platforms, service-oriented websites, and informati
