backdrop-filter

Baseline 2024 (Chrome 76, Safari 18 unprefixed, Firefox 103).

Chrome 76Edge 76Safari 18Firefox 103

Applies blur/saturate/brightness to whatever is behind an element, the basis of frosted-glass headers, sheets and dialogs. Now unprefixed everywhere.

Frosted header

CSS

.fx-023-bg {
  height: 180px;
  background: linear-gradient(135deg,#dbeaff,#ece0ff 50%,#d9f5f0) center/cover;
  padding: 16px
}
.fx-023 {
  backdrop-filter: blur(12px) saturate(1.4);
  background: #fff5;
  border: 1px solid #fff8;
  border-radius: 12px;
  padding: 12px 16px;
  font: 600 15px system-ui;
  color: #111
}

HTML

<div class="fx-023-bg"><header class="fx-023">Frosted header</header></div>

Fallback: Keep a semi-opaque background so text stays readable when the filter is unsupported; use `@supports (backdrop-filter: blur(1px))` to reduce opacity when it is.

Source: developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Prompt

For glass surfaces use `backdrop-filter: blur(12px) saturate(1.4)` plus a translucent background and a 1px translucent border; keep the background opaque enough for contrast on its own. Do not add `-webkit-` prefixes (unprefixed is Baseline) and limit blurred areas in size for performance.