Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。本番利用を推奨。
セレクター Widely available

::backdrop pseudo-element

::backdrop はモーダルダイアログやフルスクリーン要素のすぐ背後に描画されるレイヤーを選択する擬似要素。半透明の背景やぼかしエフェクトを適用して、メインコンテンツとモーダルの視覚的な分離を実現する。

ダイアログレイヤー

概要

::backdrop はモーダルダイアログやフルスクリーン要素のすぐ背後に描画されるレイヤーを選択する擬似要素。半透明の背景やぼかしエフェクトを適用して、メインコンテンツとモーダルの視覚的な分離を実現する。

対応ブラウザ

デスクトップ

Chrome 37+
Edge 79+
Safari 15.4+
Firefox 47+

モバイル

Chrome Android 37+
Safari iOS 15.4+
Firefox Android 47+

基本構文

CSS 
dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

video:fullscreen::backdrop {
  background: #000;
}

実務での使いどころ

  • モーダル背景のカスタマイズ

    ぼかし・半透明・グラデーションなど、ブランドに合った背景を提供。

  • フルスクリーン動画の背景

    アスペクト比が合わない場合の余白部分の背景色を設定。

注意点

  • ::backdrop は通常のDOM継承ツリー外にあるため、親要素のスタイルを継承しない。
  • 一部のCSSプロパティ（例: position）は ::backdrop に適用できない。

アクセシビリティ

  • 背景のぼかしが強すぎると、背後のコンテンツが見えるか見えないか曖昧になり混乱を招く。適度に設定する。

参考リンク