CSS Media Queries
On this page
light-level
This feature isn’t available in any browsers at the time of writing, but it definitely sounds like a future favorite. With the light-level
media query, you can tune your styles based on whether your user is viewing your web app outside in daylight, or perhaps checking in before going to bed. This is great news for anyone who has ever tried to read their phone in the park, or check out a website at night!
There are three available values – dim
, normal
(the default), and washed
.
Here’s an example where we change some CSS custom properties:
@media (light-level: dim) {:root {--text-color: white;--background-color: black;}}
Read more at MDN.
inverted-colors
Currently supported in Safari (and Safari on iOS).
The value is boolean, so none
and inverted
.
@media (inverted-colors) {img {filter: invert(1);}* {box-shadow: none !important;text-shadow: none !important;}}
Preferences, preferences, preferences
The fifth level of CSS media queries also has a huge focus on personalization. It introduces no fewer than five distinct media queries that lets you tweak your website to whatever the user prefers!
prefers-color-scheme
This feature is already widely supported in browsers, and has three possible values – light
, dark
, and no-preference
. Here’s an example where we change the background color of the site based on preference:
@media (prefers-color-scheme: dark) {body {background: #1e1e1e;color: white;}}

color-scheme
The color-scheme
CSS property and the corresponding meta tag allow developers to opt their pages in to the theme-specific defaults of the user agent stylesheet.
<meta name="color-scheme" content="dark light" />
/*The page supports both dark and light color schemes,and the page author prefers dark.*/:root {color-scheme: dark light;}
prefers-contrast
The prefers-contrast
media query lets you cater to users who prefer high contrast content compared to your original design.
There’s two values here - no-preference
and high
.
@media (prefers-contrast) {:root {--text-color: black;}}
prefers-reduced-motion
With the prefers-reduced-motion
media query, you can respect that wish as well. Use it to reduce those “bouncy” animations, fading images and “fun” transitions a bit. Note that you don’t necessarily have to remove all movement, but reduce it.
Browser support is pretty good. The value is boolean, so no-preference
or reduce
.
@media (prefers-reduced-motion) {* {transition-duration: 0.05s;}}

prefers-reduced-transparency
Some operating systems offer an option to reduce the amount of translucent layering effects used by the system. Although not supported by any browsers yet, the prefers-reduced-transparency
media query is aiming to help you cater to those users.
The value is boolean, so no-preference
and reduce
.
@media (prefers-reduced-transparency) {.floating-box {opacity: 1;}}
prefers-reduced-data
The value is boolean, so no-preference
and reduce
are the values.
@media (prefers-reduced-data) {.hero-image {background-image: none;background-color: salmon;}}