Estilizar un dialog y su backdrop en CSS

El backdrop es un pseudoelemento, y el dialog vive en la capa superior, encima de todo.

dialog {
  inset: 0;
  margin: auto;
  max-inline-size: min(32rem, 90vw);
  padding: 1.5rem;
  border: 0;
  border-radius: 0.75rem;
  box-shadow: 0 20px 60px rgb(15 23 42 / 0.25);
}

dialog::backdrop {
  background: rgb(15 23 42 / 0.45);
  backdrop-filter: blur(2px);
}

body:has(dialog[open]) { overflow: hidden; }

Cómo funciona

1. ::backdrop estiliza la capa que el navegador pinta detrás de un modal.
2. Un dialog cerrado es display: none: anímalo con allow-discrete.
3. inset: 0 más margin: auto centra un dialog de cualquier tamaño.

Palabras clave y builtins usados aquí

• background
• blur
• border
• inset
• margin
• overflow
• padding
• px
• rem
• rgb
• vw

El intento, en números

Líneas

16

Caracteres a escribir

297

Tokens

91

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 64 segundos.

Escribe este fragmento

Paso 3 de 4 en Superficies; paso 5 de 13 en Dar estilo a componentes.

← Anterior Siguiente →