How Reduced Motion Preferences Work in Browsers

Chrome doesn't have its own reduced motion setting. It follows your operating system: turn on reduced motion in Windows, macOS, Android or iOS, and Chrome tells websites you prefer less animation. Sites that respect it then tone down or remove motion.

Turn reduced motion on (or off)

• Windows 11: Settings → Accessibility → Visual effects → turn Animation effects off. (Off means reduced motion is on.)
• Windows 10: Settings → Ease of Access → Display → turn off Show animations in Windows.
• Mac: System Settings → Accessibility → Display → turn on Reduce motion.
• Android: Settings → Accessibility → turn on Remove animations (the name varies by phone).
• iPhone and iPad: Settings → Accessibility → Motion → turn on Reduce Motion.
• Chromebook: look under Settings → Accessibility for a reduce animations option, available on recent ChromeOS versions.

To disable reduced motion in Chrome, reverse the same switch. Restart Chrome if a page doesn't pick up the change.

What websites do with it

Chrome passes the preference to sites through a CSS feature called prefers-reduced-motion. Well-built sites use it to:

• stop parallax scrolling and large zooming or sliding effects;
• replace animated transitions with simple fades or instant changes;
• pause autoplaying background videos and carousels.

Not every site respects it. If a site still moves too much, look for its own "pause animations" control, or use Reading mode to see just the text.

Why it matters

Motion on screen can trigger dizziness, nausea or migraines in people with vestibular disorders, and makes it harder for many people with ADHD or anxiety to focus. The accessibility guidelines (WCAG) ask sites to let users turn off motion triggered by interaction, and the system setting is the standard way to signal that.

For developers: using and testing it

In CSS:

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

In JavaScript, check window.matchMedia('(prefers-reduced-motion: reduce)').matches before starting animations, and listen for changes.

To test without changing your system, open DevTools, press Ctrl + Shift + P (Cmd + Shift + P on Mac), type "Rendering", and set Emulate CSS media feature prefers-reduced-motion to reduce.

Better still, design motion that's optional from the start: keep essential information static, and use animation as an extra, not the only way something is shown.

Related settings

If motion is one of several things that make reading hard, ADHD Reading Focus narrows a page to one paragraph at a time. See also how to customize text spacing and size in Chrome.