Alert Generator
Build alert and callout boxes in four semantic variants and three styles. Editable title and body, copy the CSS.
Style
.alert {
display: flex; gap: 12px; align-items: flex-start;
padding: 16px; border-radius: 12px;
background: rgba(59, 130, 246, 0.12); color: #e2e8f0; border: 1px solid rgba(59, 130, 246, 0.40);
}
.alert .icon { flex-shrink: 0; font-weight: 700; }
.alert strong { display: block; margin-bottom: 2px; }About the alert generator
Alerts carry meaning through colour, so the four variants map to established conventions: blue for information, green for success, amber for warning, red for error. Breaking that mapping confuses people faster than any layout mistake.
The three styles trade emphasis for calm. Soft is the everyday choice, solid demands attention, and the left accent bar suits documentation callouts.
How to use it
- 1Pick the variant that matches the message.
- 2Choose a style. Soft works for most in-page messages.
- 3Edit the title and body.
- 4Adjust radius and padding.
- 5Copy the CSS.
Worth knowing
- Colour alone is not enough for colour-blind users. Keep the icon and a clear title alongside it.
Questions
When should I use solid instead of soft?
Solid for messages that must not be missed, such as a failed payment. Soft for everything routine, since a page full of solid alerts stops meaning anything.
How do I make alerts accessible?
Use role="alert" for messages that appear dynamically, so screen readers announce them. Never rely on colour alone, since a red and green alert look identical to some users.
Should alerts be dismissible?
If the message is transient, yes. If it describes an ongoing problem the user has not fixed, no, because dismissing it hides a real state.