You can add an animated background to WordPress either by writing CSS for a specific section or by using a plugin that provides background effects in its own settings. CSS offers more control; a plugin can be easier to configure. In either case, target one section, keep motion restrained, and make sure the effect does not interfere with reading or interaction.
Choose the method that fits your site
| Method | Best suited to | Key consideration |
|---|---|---|
| Custom CSS | Site owners comfortable adjusting CSS and identifying a section’s markup | There is no universal selector for every WordPress theme; scope the rule to the actual block or section. |
| Plugin | Site owners who want to configure effects through a plugin interface | Placement options, accessibility features, and free versus paid capabilities vary by plugin. |
Method 1: Add an animated background with CSS
1. Choose and identify one section
Pick a section such as a hero area, rather than animating every content element. In the block editor, select the Group or Cover block you want to affect and add a CSS class in its block settings if that option is available. The class gives your rule a specific target.
2. Add the CSS in the right WordPress interface
The location depends on your theme. For a theme that supports the Customizer, go to Appearance → Customize → Additional CSS. WordPress documents this feature beginning with WordPress 4.7; the CSS is tied to the active theme, so changing themes can deactivate the effect. WordPress: Additional CSS in the Customizer.
With an active block theme, use Appearance → Editor → Styles. The Site Editor Styles panel requires WordPress 5.9 or later, and WordPress documents site-wide Additional CSS in this interface as of WordPress 6.2. WordPress: Styles overview.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
3. Scope the animation to your section
This example assumes you added the class animated-hero to the target block. It animates a background gradient, not the text or controls inside the section. Replace the selector and colors to suit your site; the class will work only if it matches the class on your chosen block.
.animated-hero {
background: linear-gradient(120deg, #14213d, #315c8c, #14213d);
background-size: 200% 200%;
}
@media (prefers-reduced-motion: no-preference) {
.animated-hero {
animation: hero-background-shift 18s ease-in-out infinite;
}
}
@keyframes hero-background-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}When reduced motion is enabled, the animation does not run and the section retains a static gradient. If your theme or block styles override the background, adjust the selector or rule to match that theme’s markup; WordPress does not provide one selector that works for every theme.
4. Check the front end
- Preview the page at desktop and mobile widths.
- Check that text remains readable across the full animation and that links, forms, menus, and focus indicators remain visible and usable.
- Test the page with your actual theme, page builder, and caching setup. A CSS rule that works in one setup may need adjustment in another.
Theme developers can use theme.json for supported global, element, and block styles. WordPress recommends its styles property for standard theme features where possible; this is a theme-author option, not a prerequisite for adding CSS through the editor. WordPress: Global settings and styles.
Method 2: Add an animated background with a plugin
Install and configure the plugin
- In your WordPress dashboard, open Plugins → Add New and search for the plugin you want.
- Install and activate it, then open its settings and create or choose an effect.
- Set the effect’s placement: for example, across the site or on a specific block or section, depending on the plugin’s controls.
- Save the settings and check the public-facing page. Animation Kit’s listing recommends checking in a private browsing window after saving; that is the publisher’s guidance, not an independent test. Animation Kit on WordPress.org.
Compare targeting and motion options
| Plugin | Placement described in its WordPress.org listing | Motion or feature notes in the listing |
|---|---|---|
| Animation Kit | Site-wide background or a selected Group or Cover block. Selector targeting and different site-wide backgrounds per page are listed as Pro features. | The listing advertises reduced-motion handling, static-image fallbacks, and lazy loading. These are vendor claims, not independently verified behavior. |
| CMXR Canvas Motion Backgrounds | Create an animation in the plugin and apply its Animation ID as a CSS ID to the target element. | The listing says the renderer pauses off-screen and respects the browser’s reduced-motion setting. |
| Altonet Animated BG | The listing describes a configurable background layer; a separate Pro plugin adds more effects and section-level targeting options. | The listing names themes it says it has tested. That is not a guarantee of compatibility with other themes or configurations. |
Features and compatibility can change. Check each current listing for the specific placement controls and paid features you need: Animation Kit, CMXR Canvas Motion Backgrounds, and Altonet Animated BG. The listings were accessed September 30, 2026.
Before choosing, check whether the plugin targets the whole site or a selected section, how you assign the effect, whether it supports reduced motion and a static fallback, and whether the needed feature is free or paid. Test it with your site’s theme, builder, cache, and mobile devices; a plugin listing alone cannot establish how it will behave in your setup.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Keep the animation accessible and restrained
WordPress’s Block Editor Handbook advises: “Animations should be subtle. Be cognizant of users with vestibular disorders triggered by motion.” It also recommends respecting operating-system Reduce Motion settings whenever possible. The guidance was last updated September 23, 2026. WordPress Block Editor Handbook: Accessibility guidelines.
The CSS example uses prefers-reduced-motion so the background remains static for visitors whose device requests reduced motion. The WP Accessibility Knowledge Base explains this system preference and discusses animation in connection with WCAG Success Criteria 2.2.2 (Pause, Stop, Hide), 2.3.1 (Three Flashes or Below Threshold), and 2.3.3 (Animation from Interactions). Avoid rapid flashing, keep foreground content legible, and provide a way to stop long-running motion where applicable. WP Accessibility Knowledge Base: Animation from Interactions.
WordPress also advises that animation should not block interaction and should almost always finish in less than 0.2 seconds. That advice concerns interface animations, not a performance guarantee for a continuously moving background. The handbook recommends CSS transform when suitable for performance, but that does not establish that a particular animated background will be fast on every device.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
