Notification / Toast Generator

Generate small, temporary status messages for your web interface. The output supports polite or assertive live regions depending on message importance and keeps interactive actions keyboard accessible.

Live preview

Use persistent mode for important actions so readers have enough time.

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Generated website component</title><style>body{margin:0;padding:20px;font:16px/1.6 system-ui;color:#172033}*{box-sizing:border-box}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}:root{--fg:#172033;--bg:#ffffff}.stg-box{padding:24px;border-radius:12px;border:1px solid #dbe3ee;background:var(--bg);color:var(--fg)}.stg-button{padding:10px 16px;border-radius:8px;border:1px solid #cbd5e1;background:#2563eb;color:#fff;text-decoration:none;display:inline-block}.stg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}.stg-muted{opacity:.8}.stg-card{padding:20px;border:1px solid #cbd5e1;border-radius:12px}.stg-controls{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.stg-image{max-width:100%;height:160px;object-fit:contain}button:focus-visible,a:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.stg-toasts{position:fixed;bottom:24px;right:24px;max-width:min(90vw,360px);display:grid;gap:10px}.stg-toast{padding:16px;background:#ffffff;color:#172033;border:1px solid #cbd5e1;border-left:5px solid #2563eb;border-radius:8px}
@media(prefers-reduced-motion:reduce){.stg-animated,.stg-animated *{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important;position:static!important;white-space:normal!important}.stg-message,.stg-track{width:auto!important;max-width:100%!important;overflow-wrap:anywhere!important}.stg-viewport{height:auto!important;overflow:visible!important}.stg-track{flex-wrap:wrap!important}.stg-duplicate{display:none!important}}</style></head><body><button class="stg-trigger stg-button">Show notification</button><div class="stg-toasts"></div><script>document.querySelector('.stg-trigger').onclick=()=>{const list=document.querySelector('.stg-toasts');if(list.children.length>=5)list.firstChild.remove();const node=document.createElement('div');node.className='stg-toast';node.setAttribute('role',"status");const text=document.createElement('p');text.textContent="Add a clear message for your visitors.";node.append(text);const a=document.createElement('a');a.href="https://example.com/";a.textContent="Learn more";node.append(a);const close=document.createElement('button');close.textContent='Close';close.onclick=()=>node.remove();node.append(close);list.append(node);setTimeout(()=>{if(!node.contains(document.activeElement))node.remove()},5000);};</script></body></html>

What this generator does

Success, info, warning and error presets.
Top/bottom placement and stacked notifications.
Auto-dismiss duration or persistent mode.
Optional action and close buttons.

How to use

Choose a message type.
Write the message and optional action.
Choose placement and duration.
Style the toast.
Test screen-reader announcement behavior and copy the code.

Best practices

Use assertive announcements only for genuinely urgent errors.
Do not auto-dismiss messages that contain important actions too quickly.

Frequently asked questions

Can toasts stack?

Yes. The generated container can queue multiple notifications.

Can I make a toast persistent?

Yes. Disable auto-dismiss and keep the close button visible.

Related tools & guides

Modal / Popup Generator

Create an accessible modal dialog or popup with click or timed triggers, focus management and customizable layout. Copy HTML, CSS and JavaScript.

Cookie Consent Banner Generator

Generate a customizable cookie-consent banner starter with accept, reject and preferences controls. No legal-compliance claim is made; adapt it to your site and consent platform.

Back-to-Top Button Generator

Generate a responsive back-to-top button with show-after-scroll behavior, accessible labels, smooth scrolling and reduced-motion support.