<!DOCTYPE html>
<html>
<head>
<style>
button {
font-size: 15px;
padding: 5px 15px;
}
dialog::backdrop {
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>Demo of ::backdrop</h1>
<p>Click the button to show a dialog:</p>
<button id="dialogBtn">Show dialog</button>
<dialog id="myDialog">
<form method="dialog">
<p>The background behind this dialog, is a backdrop.</p>
<button>Close dialog</button>
</form>
</dialog>
<script>
const dialogBtn = document.getElementById('dialogBtn');
const myDialog = document.getElementById('myDialog');
dialogBtn.addEventListener('click', () => myDialog.showModal());
</script>
</body>
</html>