Motion accessibility

Reduced Motion Preview Toggle

See what users with "reduce motion" turned on will see. Paste your HTML and CSS, toggle the setting for the preview and compare both versions side by side.

-Your system setting
0Animations
0Transitions
0Reduced-motion queries
    no-preference Motion allowed
    reduce Reduced motion
    Universal reduced-motion reset you can add to your CSS
    

     Runs entirely in your browser. Nothing is uploaded to any server.
    

    

    


    Why respect reduced motion
    Vestibular safety
    Large movements, parallax and zooms can trigger dizziness and nausea for people with vestibular disorders.
    Users already asked
    Every major OS has a "reduce motion" setting; prefers-reduced-motion lets your CSS honor it.
    Test without settings
    Toggling your own OS setting back and forth is tedious. This preview simulates both states at once.
    


    How to use the reduced motion preview
    1. Paste your codePaste HTML with your styles in a style tag, or load the sample.
    2. CompareWatch the motion-allowed and reduced-motion previews side by side and replay them.
    3. ImproveAdd or adjust prefers-reduced-motion rules, or start from the universal reset.
    


    How the simulation works
    Browsers do not let a page switch prefers-reduced-motion on for one frame only, so the tool rewrites your code instead. In the reduced preview, every (prefers-reduced-motion: reduce) condition is replaced by one that is always true, and every (prefers-reduced-motion: no-preference) condition by one that is always false. The motion-allowed preview does the opposite. Your media queries then apply exactly as they would on a device with that setting.
    Scripts are not run in the previews, so JavaScript that checks matchMedia will not be simulated. The universal reset shown below is a popular safety net that makes animations and transitions effectively instant for reduced-motion users; it is a good baseline, but tailored alternatives such as fades instead of slides usually feel better.
    Reduce, not remove
    Swap big movements for subtle fades rather than stripping all feedback.
    Pause loops
    Infinite animations should stop, or offer a pause control.
    Smooth scroll
    Turn smooth scrolling off for reduced-motion users.
    


    Reduced motion preview FAQ
    

    Does this change my computer's settings?
    No. Only the preview code is rewritten; your system and browser settings are untouched. Your actual setting is shown at the top.
    

    How do I turn on reduced motion on my device?
    On Windows use Settings > Accessibility > Visual effects > Animation effects; on macOS and iOS use Accessibility > Display or Motion > Reduce motion; on Android use Accessibility > Remove animations.
    

    Does it work with Tailwind's motion-reduce classes?
    Yes, as long as the generated CSS with its prefers-reduced-motion media query is included in your pasted styles.
    

    Why do my JavaScript animations not change?
    Scripts are disabled in the preview for safety. Test JavaScript-driven motion with your system setting instead.
    

    Is the universal reset enough?
    It is a good safety net, but thoughtfully designed reduced-motion alternatives give a better experience.
    

    


    Try other accessibility tools
    More free tools from My Panda Toolbox.
    
RINGCSS Focus Ring GeneratorDesign visible focus styles.
AAColor Contrast CheckerCheck WCAG contrast ratios.
ARIAARIA Label CheckerCheck elements for accessible names.
SKIPSkip Link GeneratorAccessible skip-to-content links.