CSS ::backdrop Pseudo-element
Example
Style the viewbox behind a dialog box:
dialog::backdrop {
background-color: lightgreen;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The ::backdrop pseudo-element is used to
style the viewbox behind a dialog box or popover element.
| Version: | CSS Positioned Layout Module Level 4 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the pseudo-element.
| Pseudo-element | |||||
|---|---|---|---|---|---|
| ::backdrop | 37 | 79 | 47 | 15.4 | 24 |
CSS Syntax
::backdrop {
css declarations;
}
More Examples
Example
Style the viewbox behind a dialog box with a gradient:
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 »
Related Pages
CSS tutorial: CSS Pseudo-elements
