Headers: Sec-CH-Prefers-Reduced-Motion

Sec-CH-Prefers-Reduced-Motion header

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Learn more
See full compatibility

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The HTTP Sec-CH-Prefers-Reduced-Motion request header is a user agent client hint which indicates the user agent's preference for animations to be displayed with reduced motion.

If a server signals to a client via the Accept-CH header that it accepts Sec-CH-Prefers-Reduced-Motion, the client can then respond with this header to indicate the user's preference for reduced motion. The server can send the client appropriately adapted content, for example, JavaScript or CSS, to reduce the motion of any animations presented on subsequent rendered content. This could include reducing the speed or amplitude of movement to reduce discomfort for those with vestibular motion disorders.

This header is modeled on the prefers-reduced-motion media query.

Header type	Request header, Client hint
Forbidden request header	Yes (`Sec-` prefix)

Syntax

Sec-CH-Prefers-Reduced-Motion: <preference>

Directives

<preference>: The user agent's preference for reduced-motion animations. This is often taken from the underlying operating system's setting. The value of this directive can be either no-preference or reduce.

Examples

Using Sec-CH-Prefers-Reduced-Motion

The client makes an initial request to the server:

GET / HTTP/1.1
Host: example.com

The server responds, telling the client via Accept-CH that it accepts Sec-CH-Prefers-Reduced-Motion. In this example Critical-CH is also used, indicating that Sec-CH-Prefers-Reduced-Motion is considered a critical client hint.

HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Sec-CH-Prefers-Reduced-Motion
Vary: Sec-CH-Prefers-Reduced-Motion
Critical-CH: Sec-CH-Prefers-Reduced-Motion

Note: We've also specified Sec-CH-Prefers-Reduced-Motion in the Vary header to indicate to the browser that the served content will differ based on this header value, even if the URL stays the same, so the browser shouldn't just use an existing cached response and instead should cache this response separately. Each header listed in the Critical-CH header should also be present in the Accept-CH and Vary headers.

The client automatically retries the request (due to Critical-CH being specified above), telling the server via Sec-CH-Prefers-Reduced-Motion that it has a user preference for reduced-motion animations:

GET / HTTP/1.1
Host: example.com
Sec-CH-Prefers-Reduced-Motion: "reduce"

The client will include the header in subsequent requests in the current session unless the Accept-CH changes in responses to indicate that it is no longer supported by the server.

Specifications

Specification
User Preference Media Features Client Hints Headers> # sec-ch-prefers-reduced-motion>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`Sec-CH-Prefers-Reduced-Motion`	108	108	No	94	No	108	No	73	No	23.0	108	No