# Respect "Reduce Motion" Across the Whole Site

> Turns off CSS animations, transitions, parallax backgrounds and smooth scrolling for visitors whose device is set to reduce motion. Visitors without that setting see no change.

- Type: CSS
- Runs: Site-wide header
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: reduced-motion, animation, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-reduced-motion-everywhere/

## Code

```css
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto !important;
    }

    [style*="background-attachment: fixed"],
    .has-parallax,
    .wp-block-cover.has-parallax {
        background-attachment: scroll !important;
    }
}
```

## Notes

Add selectors for slider or animation libraries your theme uses if they animate with JavaScript instead of CSS.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Respect "Reduce Motion" Across the Whole Site" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/