You can add an animated background in WordPress with custom CSS or an animated-background plugin. CSS gives you more control over where and how the motion appears; a plugin can offer a settings-based workflow. Either way, target a specific section, check the result on your site, and respect visitors’ reduced-motion preferences.
Choose a method
| Method | Best suited to | Main consideration |
|---|---|---|
| Custom CSS | Site owners who want precise control and can identify the target section’s markup or CSS class. | The selector depends on your theme and page structure; there is no universal selector that works across WordPress sites. |
| Plugin | Site owners who prefer configuring effects through a plugin interface. | Placement options, reduced-motion support, fallbacks, and free or paid features vary by plugin. Check the current listing and test compatibility with your site. |
Method 1: Add an animated background with CSS
Choose the section and add a class
Decide where the animation belongs, such as a hero area or a Group or Cover block. Avoid animating every content element. If your editor or theme lets you add a CSS class to that section, use one so your styles can be scoped to the intended area.
Open the CSS editor available for your theme
For a theme that supports the Customizer, go to Appearance → Customize → Additional CSS. WordPress has documented this option since version 4.7. CSS entered there is tied to the active theme, so changing themes can deactivate the effect. See WordPress’s Customizer documentation.
For a block theme, open Appearance → Editor → Styles. The Site Editor Styles panel requires an active block theme and WordPress 5.9 or later. WordPress documents a site-wide Additional CSS editor within Styles starting with WordPress 6.2. See WordPress’s Styles documentation.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
Scope the CSS to your actual markup
There is no single WordPress selector for every site’s hero, Group block, or Cover block. The following is a pattern, not a universal drop-in rule: replace .animated-hero with the class you assigned to your section and adjust the background to suit your design.
.animated-hero {
background: linear-gradient(120deg, #243b55, #141e30, #243b55);
background-size: 200% 200%;
}
@media (prefers-reduced-motion: no-preference) {
.animated-hero {
animation: hero-background 18s ease-in-out infinite alternate;
}
}
@keyframes hero-background {
from { background-position: 0% 50%; }
to { background-position: 100% 50%; }
}
This example animates a gradient on the section itself. If you use a decorative pseudo-element or another layer instead, keep it behind text and interactive content; it must not cover links, forms, menus, or focus indicators. When reduced motion is requested, the media query leaves the background static.
Preview the front end
Save your changes and view the public-facing page at desktop and mobile sizes. Check that text remains readable and that the animation does not interfere with controls or keyboard focus. If the effect appears in the wrong place or nowhere at all, inspect the target block’s class and the rendered markup: the selector must match the element your theme actually outputs.
Method 2: Use an animated-background plugin
Install and configure a plugin
- In the WordPress admin, go to Plugins → Add New and search for a plugin you want to evaluate.
- Install and activate it, then open its settings or editor and create or configure an effect.
- Set where the effect should appear using the placement method that plugin supports, such as a block, CSS selector, or element ID.
- Save your settings and check the public-facing page. Animation Kit’s listing recommends checking in a private window after saving; this is the plugin publisher’s instruction, not an independent compatibility test.
Compare placement and motion controls before committing
These WordPress.org listings describe different workflows and capabilities. The descriptions are from the plugin publishers, accessed September 30, 2026; features, plans, and compatibility can change.
| Plugin | Placement described in its listing | Other listing claims or limits |
|---|---|---|
| Animation Kit | Site-wide backgrounds and selected Group or Cover block backgrounds. | The listing advertises reduced-motion handling, static-image fallbacks, and lazy loading. It says selector targeting and different site-wide backgrounds per page are Pro features. |
| 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 its renderer pauses off-screen and respects the browser’s reduced-motion setting. |
| Altonet Animated BG | A configurable background layer; the listing also describes section-level targeting options in a separate Pro plugin. | The listing names themes it says it has tested. That is not a guarantee of compatibility with other themes or configurations. |
Before choosing, check whether the plugin can target the area you want and whether the needed feature is free or paid. Also look for reduced-motion support and a static fallback, and confirm the placement method works with your theme or page builder. A listing’s claims are not a substitute for checking the result on your own site.
Keep the effect accessible and usable
WordPress’s Block Editor accessibility guidance, last updated September 23, 2026, says animations should be subtle, should not block interaction, and should respect the operating system’s Reduce Motion setting where possible. It also cautions against animating areas that actively report content to assistive technology.
The WP Accessibility Knowledge Base guidance on reduced motion explains that prefers-reduced-motion reflects a system preference and discusses CSS and JavaScript approaches. Its guidance relates animation to 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, maintain readable foreground content, and provide a way to stop long-running movement when applicable. When in doubt, remove the animation.
WordPress’s handbook says interface animations should almost always complete in less than 0.2 seconds and recommends CSS transform when suitable for performance. That guidance concerns interface animation; it is not a performance guarantee for a continuously animated background. Test your finished page with your actual theme, builder, cache setup, and mobile devices. No general plugin listing establishes how an effect will perform in every configuration.
Recommended Free Tools
Set theme-wide styles with theme.json only if you maintain a theme
If you are a theme developer, WordPress recommends using the styles property in theme.json for supported global, element, and block styles where possible. This is a theme-author approach, not a requirement for site owners adding an effect through the editor. See WordPress’s theme.json styles documentation.
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.
