CSS ::backdrop playground

<div class="backdrop-demo">
  <button type="button" commandfor="baseline-backdrop-dialog" command="show-modal">
    Open modal
  </button>

  <dialog id="baseline-backdrop-dialog" closedby="none">
    <h2>Modal with backdrop</h2>
    <p>This dialog is opened and closed with command and commandfor.</p>
    <button type="button" commandfor="baseline-backdrop-dialog" command="close">
      Close
    </button>
  </dialog>
</div>

.backdrop-demo dialog::backdrop {
  background-color: #111827;
}

.backdrop-demo dialog {
  padding: 1.25rem;
  border: 0;
  border-radius: 1rem;
  background: Canvas;
  color: CanvasText;
}