Day 103: the prefers-reduced-transparency media feature

posted on 01.11.2023

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

Design trends like Glassmorphism use translucent backgrounds to create a specific visual effect, resulting in underlying background colors or elements shimmering through the background of the overlaying element. That may be visually appealing, but it can distract some people and impair legibility.

Operating systems like macOS and Windows offer options to reduce transparency in the operating system.

macOS: System settings - Accessibility - Display - Reduce transparency.

iOS: Settings - Accessibility - Display - Reduce transparency

Window: Settings - Ease of Access - Display - Show transparency in Windows

A comparisson of the same dialog on macOS. In the first you can see the background shinning through and the second has a solid background color. — The settings panel in macOS without (left) and with (right) reduced transparency active.

In CSS, you can query that setting using the prefers-reduced-transparency media feature.

dialog {
  background: rgba(255, 255, 255, var(--bg-opacity, 1));
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

@media(prefers-reduced-transparency: no-preference) {
  dialog {
    --bg-opacity: 0.2;
  }
}

Here's how the dialog looks by default:

If you came to conquer, you'll be king for a day But you too will deteriorate and quickly fade away And believe these words you hear when you think your path is clear We have no control We have no control We have no control We do not understand, you have no control You are not in command You have no control We have no control No control, no control You have no control

Here's how it looks with reduced transparency active:

Currently supported in Chrome, Edge, and Firefox behind a flag.

See on CodePen

Day 103: the prefers-reduced-transparency media feature

Further reading