# backdrop-filter

> 要素の背後にあるコンテンツにフィルター効果を適用するプロパティです。ガラス効果やぼかし効果を作成できます。

- カテゴリ: アニメーション・エフェクト
- URL: https://www.css-dictionary.com/property/backdrop-filter/

## 構文

```css
backdrop-filter: <filter-function>
```

## Tailwindでは

- `backdrop-blur-sm` → backdrop-filter: blur(8px)
- `backdrop-brightness-50` → backdrop-filter: brightness(0.5)
- 一般形: `backdrop-{filter}-{amount}`
- 任意値: `backdrop-blur-[2px]`
- 補足: v4でスケール名が変更: v3のbackdrop-blur→backdrop-blur-sm等（blurのリネームに追従）。

## ブラウザ対応

- Baseline 新しく利用可能（2024年9月に全主要ブラウザ対応）
- Chrome 76+ / Firefox 103+ / Safari 18+ / Edge 79+

## コード例

### 例1: ガラス効果（グラスモーフィズム）の実装

```css
.glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
```

### 例2: モーダル背景のぼかしと暗化

```css
.modal-overlay {
  backdrop-filter: blur(5px) brightness(0.7);
  background: rgba(0, 0, 0, 0.3);
}
```

### 例3: 彩度を上げてぼかし効果を適用

```css
backdrop-filter: saturate(180%) blur(20px);
```

## TIPS

iOS Safari風のデザインに最適。パフォーマンスに注意して使用。

## よくある間違い

背景が透明でないと効果が見えない。

## AIがよく間違えるポイント

AIはfilterとbackdrop-filterを混同しがちです（filterは要素自身、backdrop-filterは要素の背後）。またAI生成のガラス風UIでよくある「効いていない」原因は、要素の背景が不透明（背後が見えない）ことです。背景は必ず半透明（rgba/color-mix）にする必要があります。ぼかし半径が大きいとスクロール時の負荷が高い点も指摘されにくい注意点です。

## AIへの依頼文例

- ヘッダーをすりガラス風（グラスモーフィズム）にして。backdrop-filterと半透明背景のセットで、非対応環境のフォールバックも
- このbackdrop-filterが効かない原因を、背景の透明度とスタッキングの観点で調査して

## 関連プロパティ

- [filter](https://www.css-dictionary.com/property/filter.md)
- [background-color](https://www.css-dictionary.com/property/background-color.md)
- [opacity](https://www.css-dictionary.com/property/opacity.md)