CSS Modal Generator

What the generated CSS covers

The snippet styles five classes:

• .modal-backdrop: fixed full-screen layer, dark translucent background (rgba(17, 24, 39, .62)), centered grid, 24 px padding around the panel.
• .modal-panel: white card, width min(100%, Npx), your corner radius, soft shadow, clipped corners.
• .modal-header: 4 px accent bar in your color, then the heading area with 20 px 24 px padding.
• .modal-body: the content area, 18 px 24 px padding.
• .modal-actions: a right-aligned row of buttons with a 10 px gap.

Matching HTML structure

The CSS expects this markup:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>Confirm</h2>
    </div>
    <div class="modal-body">
      <p>Are you sure you want to continue?</p>
    </div>
    <div class="modal-actions">
      <button>Cancel</button>
      <button>Continue</button>
    </div>
  </div>
</div>

Keep the panel inside the backdrop: the backdrop is the fixed layer and the panel is centered inside it. To open and close the modal, mount and unmount the backdrop from your application code, or toggle its display.

Fitting small screens

The panel width is capped with min(100%, Npx), so a 520 px setting becomes the full viewport width on a narrow phone, minus the 24 px backdrop padding. The actions row keeps its right alignment, and long content scrolls with the page. No media queries are needed for the common cases.

Notes and limits

The generator produces CSS only. It does not include JavaScript to open or close the modal, trap keyboard focus, or handle the ESC key. Add that logic in your application.

The header keeps its 4 px accent bar at all times; if you do not need it, remove or recolor the rule in the copied code.