How does the overlay fade in and the modal scale up at the same time?

The `.modal-overlay` transitions its own opacity, while the nested `.modal` transitions its transform from `scale(0.95)` to `scale(1)`. Both are driven by the same `.open` class on the overlay, so a single class toggle in JavaScript animates both the backdrop fade and the dialog's pop-in.

Why is the overlay position: fixed instead of absolute?

`position: fixed` positions the overlay relative to the viewport, so it covers the whole visible screen and stays in place even if the page behind it scrolls. `position: absolute` would position it relative to its nearest positioned ancestor instead, which usually isn't the full page.

How do I stop the page from scrolling while the modal is open?

This generator only produces the modal's own CSS. Add `document.body.style.overflow = 'hidden'` when you open the modal (and reset it to '' when you close it) to prevent the page behind the overlay from scrolling.

Is this modal accessible?

Add `role="dialog"` and `aria-modal="true"` to the .modal element, move keyboard focus into it when it opens, trap Tab navigation inside while it's open, and return focus to the trigger element when it closes. Also close the modal on Escape.

Does this tool send my design anywhere?

No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.

CSS MODAL GENERATOR

Build a modal dialog with a fading overlay, then copy the CSS and matching HTML.

Modal title

Some modal content lives here.

Width: 360px

Corner radius: 10px

Overlay opacity: 0.60

Shadow

Background

Text color

.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 100;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  width: 360px;
  max-width: 90vw;
  background: #201d19;
  color: #f2e9dc;
  border-radius: 10px;
  padding: 24px;
  transform: scale(0.95);
  transition: transform 0.2s ease;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.modal-overlay.open .modal {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  cursor: pointer;
  background: none;
  border: none;
  color: #f2e9dc;
  font-size: 18px;
}

How to build a CSS modal

1
Click the Open/Close button in the preview to toggle the modal.
2
Set the modal width, corner radius, and overlay opacity.
3
Pick the modal background and text colors, and toggle the shadow.
4
Copy the generated CSS and the matching HTML structure.

Questions

How does the overlay fade in and the modal scale up at the same time?: The `.modal-overlay` transitions its own opacity, while the nested `.modal` transitions its transform from `scale(0.95)` to `scale(1)`. Both are driven by the same `.open` class on the overlay, so a single class toggle in JavaScript animates both the backdrop fade and the dialog's pop-in.
Why is the overlay position: fixed instead of absolute?: `position: fixed` positions the overlay relative to the viewport, so it covers the whole visible screen and stays in place even if the page behind it scrolls. `position: absolute` would position it relative to its nearest positioned ancestor instead, which usually isn't the full page.
How do I stop the page from scrolling while the modal is open?: This generator only produces the modal's own CSS. Add `document.body.style.overflow = 'hidden'` when you open the modal (and reset it to '' when you close it) to prevent the page behind the overlay from scrolling.
Is this modal accessible?: Add `role="dialog"` and `aria-modal="true"` to the .modal element, move keyboard focus into it when it opens, trap Tab navigation inside while it's open, and return focus to the trigger element when it closes. Also close the modal on Escape.
Does this tool send my design anywhere?: No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.