Styling a dialog and its backdrop in CSS

The backdrop is a pseudo-element, and the dialog is in the top layer above everything.

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

How it works

1. ::backdrop styles the layer the browser paints behind a modal.
2. A closed dialog is display: none, so animate it with allow-discrete.
3. inset: 0 plus margin: auto centers a dialog of any size.

Keywords and builtins used here

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

The run, in numbers

Lines

16

Characters to type

297

Tokens

91

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 64 seconds.

Type this snippet

Step 3 of 4 in Surfaces, step 5 of 13 in Styling components.

← Previous Next →