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

::backdrop pseudo-element

::backdrop は CSS の擬似要素で、何らかの要素が全画面モード（最上位レイヤー）で表示される直下に直接表示されるビューポートの寸法のボックスです。

ダイアログレイヤー

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:backdrop
37
79
47
15.4
37
15.4
dialog

「dialog」要素のサポート
32
79
98
15.4
32
15.4
inherit from originating element

背景要素は元の要素から値を継承します。
122
122
120
17.4
122
17.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (32)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (79)
対応条件
  • ベンダープレフィックス付きで対応: -ms- (12)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (32)

基本構文

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

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

ライブデモ

dialog::backdrop

::backdrop pseudo-element dialog::backdrop demo.

プレビュー全画面表示

Color with Backdrop

::backdrop pseudo-element Color with backdrop demo.

プレビュー全画面表示

or Backdrop

::backdrop pseudo-element or backdrop demo.

プレビュー全画面表示

実務での使いどころ

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

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

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

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

注意点

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

アクセシビリティ

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

参考リンク