backdrop-filter

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

Chrome 76Edge 76Safari 18Firefox 103

Aplica blur/saturate/brightness ao que está atrás de um elemento, a base de cabeçalhos, sheets e diálogos em vidro fosco. Agora sem prefixo em todo lugar.

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: Mantenha um fundo semiopaco para o texto continuar legível quando o filtro não for suportado; use `@supports (backdrop-filter: blur(1px))` para reduzir a opacidade quando for.

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

Prompt

Para superfícies de vidro use `backdrop-filter: blur(12px) saturate(1.4)` mais um fundo translúcido e uma borda translúcida de 1px; mantenha o fundo opaco o suficiente para ter contraste sozinho. Não adicione prefixos `-webkit-` (sem prefixo é Baseline) e limite o tamanho das áreas desfocadas por performance.