backdrop-filter

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

Chrome 76Edge 76Safari 18Firefox 103

Aplica blur/saturate/brightness a lo que hay detrás de un elemento, la base de cabeceras, hojas y diálogos de cristal esmerilado. Ahora sin prefijo en todas partes.

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: Mantén un fondo semiopaco para que el texto siga siendo legible cuando el filtro no esté soportado; usa `@supports (backdrop-filter: blur(1px))` para reducir la opacidad cuando sí lo esté.

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

Prompt

Para superficies de cristal usa `backdrop-filter: blur(12px) saturate(1.4)` más un fondo translúcido y un borde translúcido de 1px; mantén el fondo lo bastante opaco para que el contraste funcione por sí solo. No añadas prefijos `-webkit-` (sin prefijo es Baseline) y limita el tamaño de las áreas desenfocadas por rendimiento.