# backdrop-filter

Status: Baseline 2024 (Chrome 76, Safari 18 unprefixed, Firefox 103).  
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter  
Page: https://designforai.dev/css/backdrop-filter

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

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

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