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

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

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<button type="button" commandfor="baseline-backdrop-dialog" command="show-modal">
  Abrir 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 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>

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