CSS Toast Notification Generator
Design toast notifications — success/error/info/warning, position, and colors — with a live preview and a tiny showToast() helper. Copy the code. Free.
💡 How to use
- A toast is a small, auto-dismissing notification. Style it here and click "Show toast" to preview.
- Copy the CSS plus a tiny
showToast()helper to trigger it from your JavaScript. - Choose a position and type color to signal success, error, info, or warning.
Free CSS Toast Notification Generator
Create toast notifications with CSS and copy the code in one click. Choose the type (success, error, info, warning), position, and colors, preview it live, and get ready-to-use CSS plus a tiny showToast() JavaScript helper to trigger it. Free, no sign-up, runs in your browser.
What is a toast notification?
A toast is a small, non-blocking message that pops up briefly to confirm an action or report a result — 'Saved successfully', 'Something went wrong', 'Copied to clipboard' — and then disappears on its own. Unlike a modal, it does not interrupt the user or require a click to dismiss. This generator styles the toast with CSS and provides a small JavaScript helper to show it on demand.
How to use the toast generator
It is instant:
- Pick a type — success, error, info, or warning — which sets the accent color.
- Choose a screen position (a corner or center).
- Adjust the background, text, accent, and radius, and set the message.
- Click 'Show toast' to preview, then copy the CSS and showToast() function.
How the toast works
The toast is a fixed-position element styled with CSS, including a colored left border that signals its type and a shadow that lifts it off the page. It starts invisible and slightly offset, then transitions in when a show class is added. The provided showToast() helper creates the element, adds it to the page, triggers the transition, and removes it automatically after a few seconds — so a single function call is all you need to fire a notification.
Choosing type colors and positions
Consistent colors help users read a toast at a glance: green for success, red for errors, blue for information, and amber for warnings. Position is a design choice — bottom-right and top-center are the most common, keeping the toast out of the way of primary content. Whatever you choose, use the same position and color scheme throughout your app so notifications feel predictable rather than random.
Keeping toasts accessible
Because toasts appear and vanish quickly, some users can miss them. For important messages, give the toast container an ARIA live region (aria-live="polite" for status, or "assertive" for errors) so screen readers announce it. Do not put critical actions inside a toast that disappears, and consider a slightly longer display time or a manual dismiss button for longer messages so users have time to read them.
Pro tip
Keep toast messages short and specific — one line that says what happened. Avoid stacking many toasts at once; queue them or replace the previous one instead. Match the accent color to the message type consistently, and respect reduced-motion preferences by softening the slide-in animation. For matching buttons and controls, our other CSS generators can help.
FAQ
Is this Toast Generator free?
What is a toast notification?
Does the toast need JavaScript?
How do I change the toast position?
What do the different types mean?
How do I make toasts accessible?
How long should a toast stay on screen?
Related tools
Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Flexbox Generator for a faster SEO workflow.