backdrop-filter プロパティ

最終更新：2026-09-13

backdrop-filter backdrop-filter プロパティ

backdrop-filter は、要素の後ろ側の領域にフィルター効果（blur や brightness など）を適用し、すりガラス（frosted-glass）効果を作る標準的な方法です。filter と異なり、要素自体ではなくその下のコンテンツに影響します。モダンブラウザのサポートは良好ですが、効果を表示するには要素の背景が少なくとも部分的に透明である必要があります。

カテゴリ
初期値	none
継承	いいえ
適用対象	all
アニメーションタイプ	filter
CSS バージョン	CSS3
状態	標準

📝 構文

backdrop-filter: none | <filter-function>;

⚙️ 値

値	タイプ	説明
`none`	キーワード	backdrop-filter なし
`<filter-function>`	タイプ	背景のぼかし／フィルター効果

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
backdrop-filter	✓ v79	✓ v79	✓ v103	✓ v9	✓ v66
すべての主要ブラウザーでサポート

ヒント： backdrop-filter は、その後ろのフィルターされたコンテンツが透けて見えるように、要素の背景が透明または半透明である必要があります。

重要： filter との違い: filter は要素自体に影響しますが、backdrop-filter は要素の後ろのコンテンツに影響します。

❓ よくある質問

Qbackdrop-filter と filter の違いは？

Afilter は要素自体とその子要素の描画結果に適用されます。backdrop-filter は要素の後ろに「透けて見える」コンテンツに適用され——要素自身のテキストやコンテンツには触れずに背景レイヤーをフィルターします。典型的な使い方は backdrop-filter: blur(10px) によるすりガラスのナビバーで、表示するには半透明の背景が必要です。両者は組み合わせられ、どちらもスタックコンテキストを生成します。

Qbackdrop-filter のブラウザ対応は？

Aモダンブラウザは広くサポートしています。Chrome 76 以降、Edge 76 以降、Firefox 103 以降（デフォルトで有効）、Safari 9 以降（-webkit- プレフィックス付き）です。-webkit-backdrop-filter と backdrop-filter の両方を書きます。IE は非対応で、効果を表示するには要素に半透明の背景が必要です。

Qすりガラス効果が効かないのはなぜですか？

Aよくある原因は次のとおりです。要素の背景が完全に不透明（例: background: #fff）で、その後ろのコンテンツを覆っている。古い Safari がスキップするよう -webkit- プレフィックスが欠けている。ブラウザが非対応（IE）。あるいは単に要素の後ろにぼかす対象が何もない。正しい設定は、実際のコンテンツが後ろにあり、rgba(255,255,255,0.3) のような半透明の背景を用意することです。

Qbackdrop-filter はどのフィルター関数をサポートしますか？

Afilter と同じ集合です: blur()、brightness()、contrast()、grayscale()、sepia()、hue-rotate()、invert()、saturate()、opacity()、drop-shadow() で、スペースで組み合わせられます。すりガラスに彩度（saturation）の向上を加えるのは、ナビバーでよくある組み合わせです。