prefers-reduced-motion CSS Snippet Generator
Generate the CSS (and optional JavaScript) that calms animation, transitions, smooth scrolling and autoplaying video for people who’ve asked their device to reduce motion.
About this tool
Movement on screen, such as parallax scrolling, zooming transitions and bouncing animations, can cause dizziness, nausea or migraines for people with vestibular disorders, and makes concentrating harder for others. Phones and computers have a “reduce motion” setting, and the prefers-reduced-motion media query lets your site respect it. WCAG 2.3.3 (Animation from Interactions) asks that motion triggered by interaction can be turned off.
Durations are set to a tiny value rather than zero so that any JavaScript waiting for an animationend or transitionend event still gets it. CSS can't pause a video, so tick the JavaScript option if you have autoplaying video, and use the same matchMedia check in your own scripts. Reducing motion doesn't have to mean removing everything: a quick fade is usually fine where a big slide isn't. Your choices are remembered on this device.