EspañolCSS alert and notice boxes (info, success, warning, error)
Choose the notice types, the style and whether the box can be closed. The preview shows all types together.
How to useHighlight what must not be missed
Available in: 
CSS alert and notice boxes (info, success, warning, error): what it is for
Generate the boxes that highlight a message on your site or blog: a maintenance notice, an order confirmation, a sale deadline, a form error or a tip in the middle of a post. Choose the types, one of four styles (side border, full border, solid and thin line), the corner radius and whether the box has a close button.
Each type has its own icon and title so it does not rely on color alone, and the text colors have good contrast with the background. The help section explains when to use role="alert" and role="status" for notices that appear after an action, such as submitting a form.
How to use
- Tick the notice types.
- Choose the style and close button.
- Copy the HTML and CSS.
When to use it
- Maintenance or sale notices.
- Form messages.
- Tips and notes in posts.
Frequently asked questions
What is the difference between role="alert" and role="status"?
role="alert" makes the screen reader announce the notice immediately, interrupting what it was reading, and is meant for errors that appear after an action, such as a form submitted with a problem. role="status" announces without interrupting and is meant for success messages. Notices that are already on the page when it opens need neither, and that is how the tool generates them.
Why is color not enough?
People who cannot tell red from green, or who use a monochrome screen, cannot see the difference by color alone. That is why each type has its own icon and title, and the text colors have enough contrast with the background.
How do I show the notice after a form is submitted?
Keep the box in the HTML with the hidden attribute and role="alert" (for errors) or role="status" (for success), and remove hidden with JavaScript when it happens. The screen reader announces the text the moment it appears.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.