CSS MODAL GENERATOR
Build a modal dialog with a fading overlay, then copy the CSS and matching HTML.
In short
Design a modal dialog with overlay — width, corner radius, colors, overlay opacity, and shadow — on a live preview, then copy the CSS and HTML. Runs entirely in your browser.
Modal title
Some modal content lives here.
.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.
Related tools
- CSS CRT / Scanlines / VHS GeneratorBuild a retro CRT screen overlay with scanlines, vignette, phosphor tint, and flicker animation, then copy the CSS.
- CSS Image Hover Overlay GeneratorBrowse zoom, dim-with-caption, slide-up caption, and icon-reveal hover overlays for images, and copy the CSS.
- CSS Tooltip GeneratorDesign a hover tooltip — position, colors, font size, corner radius, arrow — and copy the CSS and HTML.
- CSS Card GeneratorDesign a UI card — corner radius, padding, shadow intensity, colors, hover lift — and copy the CSS and HTML.
- CSS Accordion GeneratorDesign a collapsible accordion panel — header/body colors, corner radius, transition speed — and copy the CSS and HTML.
- CSS Container GeneratorDesign a centered, max-width page container — padding, background, corner radius — and copy the CSS.
- CSS Navbar GeneratorDesign a responsive navbar — alignment, height, colors, sticky positioning, and shadow — and copy the CSS and HTML.
- CSS Checkbox GeneratorDesign a custom checkbox from a real input — size, radius, border, checked-fill, checkmark colors — and copy the CSS and HTML.
Updated