CSS ::backdrop Pseudo Element Playground Example

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
button {
  font-size: 1.2rem;
  padding: 5px 15px;
}

dialog::backdrop {
  background-color: lime;
}
</style>
</head>
<body>
<button id="showDialogBtn">Show a dialog</button>

<dialog id="favDialog">
  <form method="dialog">
    <p>The background shown outside of this dialog is a backdrop.</p>
    <button id="confirmBtn">Close the dialog</button>
  </form>
</dialog>
<script>
const showDialogBtn = document.getElementById('showDialogBtn');
const favDialog = document.getElementById('favDialog');

showDialogBtn.addEventListener('click', () => favDialog.showModal());

</script>
</body>
</html>