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

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;
  }
}

[data-sample] {
transform: rotate(0);
background: linear-gradient(45deg, #53c8ff, #ff0067);
}
[data-sample] dialog {
–bg-opacity: 0.2;
background: rgba(255, 255, 255, var(–bg-opacity));
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
height: 80%;
border: none;
display: flex;
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.3);
}
@media not all and (prefers-reduced-transparency), (prefers-reduced-transparency) {
[data-sample] dialog {
–bg-opacity: 1;
}
}
@media(prefers-reduced-transparency: no-preference) {
[data-sample]:not(.no-transparency) dialog {
–bg-opacity: 0.2;
}
}
[data-sample].no-transparency dialog {
–bg-opacity: 1;
}

Here’s how the dialog looks by default:

Here’s how it looks with reduced transparency active:

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

My blog doesn’t support comments yet, but you can reply via [email protected].