Developer Tools New Tool

Free Online CSS Modal Generator Built on dialog

Style a modal built on the real dialog element rather than a div with a z-index. Set the backdrop colour and blur, the panel width, padding, radius and shadow, the header, body and footer layout, the close button, and a fade, scale or slide entry animation with a duration you choose.

Free Forever Nothing Uploaded Real dialog element Runs in your browser

Free Online CSS Modal Generator Built on dialog

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Modal Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

This is a real dialog opened with showModal. Press Escape to close it, and try pressing Tab while it is open: focus stays inside, and the page behind it cannot be reached.

CSS

Panel Class name Width px Padding px Radius px Shadow 30px

Colours Panel Text Border px Backdrop Backdrop alpha 0.55 Backdrop blur px

Entry animation Style Duration ms Slide distance px

Header, footer and close button Divider lines Footer buttons Close button px Accent

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Style a Modal with the dialog Element

A few steps, and nothing is uploaded.

Size the panel Width, padding, radius and shadow. The width is written as a min of your value and the viewport minus a margin, so the panel never touches the edges of a narrow screen and you do not need a separate media query for phones.

Set the colours and the backdrop A panel background, text colour and optional border, then the backdrop colour, its alpha and a blur. The backdrop is a real pseudo-element on the dialog, so it covers the page without an extra div and without any z-index guessing.

Choose how it arrives Fade, fade and scale, or fade and slide up, with a duration. The transition is written with allow-discrete and an @starting-style block so the opening state animates, and a plain fallback is included for browsers that do not support it.

Copy the set and open it from script The output includes the ::backdrop rule, the header, body and footer layout, the close button and the two lines of JavaScript that open and close the dialog, because a dialog is opened with showModal, not with a class.

What to Know About Modal Dialogs

Including what dialog does for you that a div cannot.

The dialog element gives you three things a div cannot. Opening it with showModal() keeps focus inside the dialog, so Tab cycles within it instead of wandering off into the page behind. It closes on Escape with no key handler of your own. And it makes the rest of the document inert, so nothing behind the dialog can be clicked or read by assistive technology. That is the whole reason to use it: a div with a high z-index gives you none of those, and reimplementing them correctly is a surprising amount of code.

Animating a dialog in needs @starting-style. A dialog goes from display: none to shown, and a transition has no starting value to work from, which is why naive fade in code does nothing. The generated CSS puts display and overlay in the transition with allow-discrete, and uses an @starting-style block for the values the dialog starts at. A plain @supports not fallback is written underneath so that in a browser without support the dialog simply appears, fully visible, rather than staying invisible.

Use showModal, not show or the open attribute. show() and a hardcoded open attribute both display the dialog without the modal behaviour: there is no backdrop, focus is not contained, Escape does nothing and the page behind stays interactive. They are for non modal dialogs, which are a different thing. The snippet in the output uses showModal, and the close button calls close().

This page styles one dialog and does not write your markup logic. There is no drawer or bottom sheet variant, no scrolling body with sticky header, no nested dialog handling, no form validation and no toast. It does not read an existing rule set back into the controls. Clicking the backdrop to close is not styling either, so it is not generated: the output mentions the few lines needed, but you add them yourself.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

A real dialog Focus containment, Escape and an inert background come free.

Styled backdrop A ::backdrop rule with your colour, alpha and blur.

Entry animation Fade, scale or slide with @starting-style and a fallback.

Header and footer Title, close button, body and a footer with three layouts.

Markup and script The expected HTML and the showModal call, both in the output.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Modal Generator

For years a modal meant a fixed position div, a second div for the shade behind it, a z-index chosen by argument, a key listener for Escape, a focus trap that was never quite right, and a scroll lock on the body. The <dialog> element replaces nearly all of that. It is now supported everywhere that matters, and once you open it with showModal() the browser handles the backdrop, the focus containment, the Escape key and making the rest of the page inert.

That leaves styling, which is what this page does. The preview is a real dialog: the button opens it with showModal, the close button calls close, Escape works because the browser makes it work, and the generated CSS is applied through a stylesheet in the page so the ::backdrop rule and the opening animation are the real thing rather than an impression of them.

The interesting problem is the animation. A dialog is display: none until it is open, and transitions do not run from a display change, so the usual fade in code silently does nothing. The fix is to put display and overlay in the transition with allow-discrete and to declare the opening values in an @starting-style block. Because that is recent, the tool also writes an @supports not fallback that leaves the dialog plainly visible, which is the right failure: a dialog that arrives without animation is fine, a dialog stuck at zero opacity is not.

Frequently Asked Questions

showModal, the backdrop, animating in and closing.

Because showModal gives you focus containment, closing on Escape and an inert background, and each of those is easy to get wrong by hand. A focus trap in particular has to account for shadow roots, iframes and dynamically added content. The dialog element is also announced properly by screen readers as a dialog, which a div only manages with the right role and aria attributes.

The backdrop is a pseudo-element, so it has no click target of its own. The usual approach is to listen for a click on the dialog and close it when the click target is the dialog element itself, which happens only outside the panel. Some people instead wrap the content in an inner div and compare against its bounding box. Either way it is a few lines of script, not CSS, so this tool notes it rather than generating it.

Because the dialog starts at display none and a transition needs a starting value that exists. You need display and overlay in the transition list with allow-discrete, and an @starting-style block giving the values the dialog animates from. The CSS here writes all of that, plus a fallback so the dialog is visible in browsers that do not support it.

A modal dialog makes the rest of the document inert, so you cannot interact with it, but the page behind can still scroll in some browsers. If that bothers you, add overflow hidden to the html or body element while the dialog is open and remove it on close. That is a two line script change and it is not part of the generated CSS.

Yes, and a form with method="dialog" closes the dialog on submit and records which button was used in the returnValue. That is often exactly what a confirm dialog wants. Do keep the submit button inside the form, and remember the dialog closing does not itself submit anything to a server.