# backdrop-filter

Estado: Baseline 2024 (Chrome 76, Safari 18 sin prefijo, Firefox 103).  
Fuente: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter  
Página: https://designforai.dev/es/css/backdrop-filter

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.

## HTML

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

## CSS

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

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é.

## 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.