CSS ::backdrop playground

Explore ::backdrop with a native modal dialog. Change only the backdrop background color and copy the generated command/commandfor HTML and CSS.

HTML

<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>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

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

<dialog class="p-5 border-0 rounded-2xl bg-[Canvas] text-[CanvasText] backdrop:bg-[#111827]" 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>

CSS

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

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

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

  &::backdrop {
    background-color: #111827;
  }
}