CSS ::backdrop Pseudo-element

Definition and Usage

CSS ::backdrop Pseudo-elements are used to set the style of the view box behind the dialog or popup elements.

Example

Example 1

Set the style of the view box behind the dialog:

dialog::backdrop {
  background-color: lightgreen;
}

Try It Yourself

Example 2

Use gradient to set the style of the view box behind the dialog:

dialog::backdrop {
  background-color: #1fc8db; /* For browsers that do not support gradients */
  background-image: linear-gradient(140deg, #EADEDB 0%, #BC70A4 50%, #BFD641 75%);
  opacity:0.75;
}

Try It Yourself

CSS Syntax

::backdrop {
  css declarations;
}

Technical Details

Browser Support

The numbers in the table specify the first browser version that fully supports this pseudo-element.

Related Pages

Tutorial:CSS Pseudo-elements