<!DOCTYPE html>
<html>
<head>
<style>
button {
font-size: 15px;
padding: 5px 15px;
}
dialog::backdrop {
background-color: #1fc8db;
background-image: linear-gradient(140deg, #EADEDB 0%, #BC70A4 50%, #BFD641 75%);
opacity:0.75;
}
</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 id="confirmBtn">Close dialog</button>
</form>
</dialog>
<script>
const dialogBtn = document.getElementById('dialogBtn');
const myDialog = document.getElementById('myDialog');
dialogBtn.addEventListener('click', () => myDialog.showModal());
</script>
</body>
</html>