Testing CSS/Websites for prefers-reduced-motion Queries

By James LePage
 on August 9, 2022

Testing CSS/Websites for prefers-reduced-motion Queries

By James LePage
 on August 9, 2022

prefers-reduced-motion is a helpful accessibility query that every web developer should be using. It checks to see if a users system has been instructed to minimize motion. Some may be negatively impacted by animations such as bouncing buttons, scrolling marquees, and autoplaying media.

To stop this, a systemwide preference of "reduce motion" can be set. Here's an example of how to toggle this feature on Mac ->


And here's an example of how you implement this api in your CSS (sourced from

/* If the user has expressed their preference for reduced motion, then don't use animations on buttons. */ @media (prefers-reduced-motion: reduce) { button { animation: none; } } /* If the browser understands the media query and the user explicitly hasn't set a preference, then use animations on buttons. */ @media (prefers-reduced-motion: no-preference) { button { /* `vibrate` keyframes are defined elsewhere */ animation: vibrate 0.3s linear infinite both; } }

If the user has toggled "reduce motion" on their system, the css in the media query for "prefers-reduced-motion: reduce" will be used.

CSS here should only use animation for essential user interactions, if at all.

If reduce motion is not toggled, code for "prefers-reduced-motion: no-preference" will be used.

Also, here's a helpful speed tip from

If you have a lot of animation-related CSS, you can spare your opted-out users from
downloading it by outsourcing all animation-related CSS into a separate stylesheet
that you only load conditionally via the media attribute on the link element
html ‹link rel="stylesheet" href="animations.css" media=" (prefers-
reduced-motion: no-preference)">

When implementing prefers-reduced-motion, it's important to test that your code actually does what you want it to.

Of course, you can go to your system settings and toggle this on and off. However, that can get tedious. It will also impact this setting system-wide, which may get confusing if you're expecting motion (or vice-versa) and not getting it.

Instead, there's a better way to test CSS for prefers-reduced-motion queries.

In Chrome, there's a little know setting in devtools that allows you to emulate this setting. Instead of turning it on system-wide, we can emulate it in the browser.

Doing this is easy.

First open devtools (F12). Then do CTRL/CMND + SHIFT + P, and type reduce.

Press enter or click the first item in the list, called "Emulate CSS prefers-reduced-motion: reduce".


And this setting will toggle prefers-reduced-motion: reduce without you needing to set it systemwide and reload your tab.

Just like that, you can now easily test your code for prefers-reduced-motion: reduce!

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Notify of
Inline Feedbacks
View all comments
Article By
James LePage
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram