Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style>
button {
  font-size: 15px;
  padding: 5px 15px;
}
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;
}
</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>