Playground de ::backdrop en CSS

Explora ::backdrop con un dialog modal nativo. Cambia solo el color de fondo del backdrop y copia el HTML con command/commandfor y el CSS generado.

HTML

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

  <dialog id="baseline-backdrop-dialog" closedby="none">
    <h2>Modal con backdrop</h2>
    <p>Este dialog se abre y se cierra con command y commandfor.</p>
    <button type="button" commandfor="baseline-backdrop-dialog" command="close">
      Cerrar
    </button>
  </dialog>
</div>

CSS

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

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

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