Sec-CH-Prefers-Reduced-Motion
The HTTP Sec-CH-Prefers-Reduced-Motion request header is a client hint indicating a preference for reduced animation and motion effects, allowing servers to deliver appropriately styled responses for users sensitive to movement.
Note
Supported in Chromium-based browsers (Chrome, Edge, Opera) only. Not available in Firefox or Safari.
Usage
The Sec-CH-Prefers-Reduced-Motion header reports the same
preference exposed by the CSS prefers-reduced-motion media query.
The preference originates from operating system accessibility settings
or browser configuration. Users who experience discomfort from
animations, parallax scrolling, or other motion effects enable this
setting to request minimal movement. Servers receiving this hint
send CSS with reduced or eliminated animations, avoiding the need to
load animation-heavy stylesheets and then override them client-side.
Before a browser sends Sec-CH-Prefers-Reduced-Motion, the server must opt in by listing the header in Accept-CH. Because the header carries high-entropy information, browsers require explicit permission before including the preference in requests. Sites serving different CSS based on motion preferences must also list the header in Vary to ensure caches store separate versions.
The header is supported by Chromium-based browsers (Chrome, Edge, Opera) and requires a secure context (HTTPS).
Values
`"no-preference"`
Indicates no specific preference regarding motion and animation effects. The browser has no accessibility constraint related to movement.
`"reduce"`
Indicates a preference for reduced motion. The browser requests minimal or eliminated animations, transitions, and other movement effects.
Example
A browser signals the operating system accessibility setting for reduced motion. The server uses this information to deliver CSS without complex animations or parallax scrolling effects.
Sec-CH-Prefers-Reduced-Motion: "reduce"
A browser running without motion preferences set sends the default value. The server delivers the standard CSS including animations and transitions.
Sec-CH-Prefers-Reduced-Motion: "no-preference"
Takeaway
The Sec-CH-Prefers-Reduced-Motion header delivers the motion preference at request time, enabling servers to provide accessible experiences without requiring client-side detection and CSS overrides.