Need a popup dialog for your site? Our free CSS Modal Generator builds a customisable modal in seconds — set the title, text, colours and animation, try it live, then copy the HTML and CSS.
CSS Modal Generator
How to Use
- Enter your modal title and text.
- Pick the overlay colour and darkness, width and corner radius.
- Choose an opening animation.
- Click Open Modal to try it live, then copy the HTML and CSS.
Key Features
- Generates modal HTML plus CSS in one block.
- Live preview with a working open and close.
- Custom overlay, width, corners and three animations.
- Closes on backdrop click or the Close button.
- One-click copy — free with no sign-up.
FAQs
How do I add the modal to my site?
Paste the HTML where you want the dialog to appear and include the CSS in your stylesheet. The overlay is hidden until you show it.
How do I open and close it with JavaScript?
Toggle the overlay element’s display style between flex (open) and none (closed). Attach the toggle to any button’s click event.
Can I change the class names?
Yes. Rename .modal-overlay and .modal-box in both the HTML and the CSS so they stay in sync.
Do I need an account to use this tool?
No. Like every tool on ToolsFreeHub, the CSS Modal Generator is free and works without signing up.