Last updated: March 13, 2026

How to Create Toast Notifications with CSS

Build beautiful, animated toast notifications from scratch. Learn positioning, variants, progress bars, and responsive design with pure CSS.

What Are Toast Notifications?

Toast notifications are small, non-blocking messages that appear temporarily to provide feedback. They're called "toasts" because they pop up like toast from a toaster. Unlike modals, they don't interrupt the user's workflow.

When to Use

Success messages, error alerts, status updates, form validation feedback, and non-critical notifications.

Key Features

Fixed positioning, stacking support, animations, color variants, close button, and auto-dismiss timer.

CSS vs JS

CSS handles styling and animations. JavaScript is needed for triggering, dismissing, and interactivity.

Quick Reference

Jump to any section or click the section headings below.

Basic Slide-in Fade Variants Positions Progress Responsive

Basic Toast Structure

The foundation of toast notifications: a fixed container to hold multiple toasts, and individual toast items with proper styling.

Live Preview

This is a toast notification

Another notification

HTML + CSS Code

Tips

*Use position: fixed to keep toasts visible while scrolling
*z-index: 1000+ ensures toasts appear above other content
*flex-direction: column stacks multiple toasts vertically
*gap: 10px provides consistent spacing between toasts

Slide-in Animation

Add a smooth slide-in animation to make toasts appear elegantly from the side. This creates a polished user experience.

Live Preview

Sliding in from the right!

HTML + CSS Code

Tips

*ease-out timing creates a natural deceleration effect
*0.3s is the sweet spot - fast but noticeable
*Combine translateX with opacity for a smoother effect
*Use forwards to keep the final animation state

Fade-in / Fade-out Animation

Create fade animations for a subtle entrance and exit. This example shows how to simulate auto-dismiss using pure CSS with animation-delay.

Note:Note: True auto-dismiss requires JavaScript. This CSS-only version simulates the behavior with animation timing.

Live Preview

I'll fade away in 3 seconds!

HTML + CSS Code

Tips

*10% and 90% keyframes create the visible duration
*translateY adds subtle movement during fade
*For real auto-dismiss, use JS setTimeout to remove the toast
*animation-fill-mode: forwards keeps the final (hidden) state

Toast Variants (Success, Error, Warning, Info)

Different color variants for different types of notifications. Each variant uses a distinct color to communicate the message type.

Live Preview

✓Success! Operation completed.

✗Error! Something went wrong.

⚠Warning! Check your input.

ℹInfo: New update available.

HTML + CSS Code

Tips

*Use semantic colors: green=success, red=error, yellow=warning, blue=info
*Icons help users quickly identify the toast type
*Consider accessible color contrast (WCAG guidelines)
*Subtle variants with border-left work well for light themes

Positioning Options

Toast containers can be positioned in 6 different locations: top-right, top-left, top-center, bottom-right, bottom-left, and bottom-center.

Live Preview

top-right

top-left

top-center

bottom-right (default)

bottom-left

bottom-center

HTML + CSS Code

Tips

*Bottom-right is the most common position (least intrusive)
*Top positions work well for important alerts
*Use flex-direction: column-reverse for bottom positions to stack newest at bottom
*Center positions use transform: translateX(-50%) for true centering

Progress Bar Timer

Add a progress bar to indicate how long the toast will remain visible. This gives users visual feedback about the auto-dismiss timing.

Note:The progress bar animation runs once. For true auto-dismiss functionality, JavaScript is required.

Live Preview

✓Saved successfully!

HTML + CSS Code

Tips

*Use linear timing for a predictable countdown feel
*Progress bar gives users a sense of urgency
*Match the animation duration to your actual dismiss timeout in JS
*overflow: hidden on toast prevents progress bar from showing outside rounded corners

Responsive Sizing

Make toasts responsive for different screen sizes. On mobile, toasts should be full-width and positioned appropriately.

Live Preview

Toast

Mobile

Toast

Tablet

Toast

Desktop

Toast adapts to screen size

HTML + CSS Code

Tips

*Use max-width: calc(100% - 40px) to prevent overflow
*On mobile, full-width toasts are more readable
*Reduce padding on smaller screens for better space usage
*Test on real devices to ensure touch targets are large enough

Complete Toast System Example

Here's a complete example combining all the concepts. For a production implementation, you'll need to add JavaScript for triggering, dismissing, and managing the toast queue.

<!-- Complete Toast Notification System -->
<div class="toast-container toast-bottom-right" id="toastContainer">
  <!-- Toasts will be inserted here by JavaScript -->
</div>

<style>
/* Container */
.toast-container {
  position: fixed;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 1000;
  max-width: calc(100% - 40px);
}

.toast-bottom-right {
  bottom: 20px;
  right: 20px;
}

/* Toast */
.toast {
  display: flex;
  align-items: center;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 280px;
  max-width: 400px;
  overflow: hidden;
  animation: slideIn 0.3s ease-out;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  flex: 1;
}

.toast-icon { font-size: 18px; }
.toast-message { flex: 1; font-size: 14px; }

.toast-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.toast-close:hover { opacity: 1; }

/* Progress bar */
.toast-progress {
  height: 4px;
  background: rgba(255,255,255,0.3);
}
.toast-progress-bar {
  height: 100%;
  background: rgba(255,255,255,0.8);
  animation: shrink var(--duration, 3s) linear forwards;
}

/* Variants */
.toast-success { background: #10b981; color: #fff; }
.toast-error { background: #ef4444; color: #fff; }
.toast-warning { background: #f59e0b; color: #fff; }
.toast-info { background: #3b82f6; color: #fff; }

/* Animations */
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

@keyframes shrink {
  from { width: 100%; }
  to { width: 0%; }
}

.toast-exit {
  animation: slideOut 0.3s ease-in forwards;
}

/* Mobile */
@media (max-width: 480px) {
  .toast-container {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
  .toast {
    min-width: auto;
    max-width: none;
    width: 100%;
  }
}
</style>

<!-- JavaScript (basic example) -->
<script>
function showToast(message, type = 'info', duration = 3000) {
  const container = document.getElementById('toastContainer');
  const toast = document.createElement('div');
  toast.className = `toast toast-${type}`;
  toast.innerHTML = `
    <div class="toast-content">
      <span class="toast-icon">${getIcon(type)}</span>
      <span class="toast-message">${message}</span>
      <button class="toast-close" onclick="dismissToast(this)">&times;</button>
    </div>
    <div class="toast-progress">
      <div class="toast-progress-bar" style="--duration: ${duration}ms"></div>
    </div>
  `;
  container.appendChild(toast);
  setTimeout(() => dismissToast(toast.querySelector('.toast-close')), duration);
}

function dismissToast(btn) {
  const toast = btn.closest('.toast');
  toast.classList.add('toast-exit');
  setTimeout(() => toast.remove(), 300);
}

function getIcon(type) {
  const icons = {
    success: '&#10003;',
    error: '&#10007;',
    warning: '&#9888;',
    info: '&#8505;'
  };
  return icons[type] || icons.info;
}
</script>

Frequently Asked Questions

How do I auto-dismiss a toast notification?

True auto-dismiss requires JavaScript. Use setTimeout to remove the toast element or add a fade-out class after a specified duration (typically 3-5 seconds). The CSS animations shown here can visually simulate the timing, but JS is needed to actually remove the element from the DOM.

What's the best position for toast notifications?

Bottom-right is the most common and least intrusive position for non-critical notifications. Use top-right or top-center for important alerts that need immediate attention. Avoid positions that might overlap with important UI elements like navigation or action buttons.

How many toasts should I show at once?

Best practice is to limit visible toasts to 3-5 at a time. If more notifications come in, queue them or replace older ones. Too many toasts can overwhelm users and obscure important content. Consider grouping similar notifications.

Should I use icons in toast notifications?

Yes, icons significantly improve scannability and help users quickly understand the toast type without reading the message. Use consistent icons: checkmark for success, X for error, exclamation for warning, and info circle for informational messages.

How do I make toasts accessible?

Use role='alert' or aria-live='polite' on the toast container so screen readers announce new toasts. Ensure sufficient color contrast (WCAG 4.5:1 for text). Provide a visible close button with proper focus styles. Don't rely solely on color to convey meaning - use icons and text too.

Can I make a toast with just CSS?

CSS-only toasts have limitations. You can create the styling, animations, and even simulate auto-dismiss timing, but you cannot: trigger toasts on events, truly remove them from the DOM, or make the close button functional. For production use, you'll need JavaScript or a library like React Hot Toast, Sonner, or Toastify.

Extract toast styles from any website

Frontend Hero lets you click any element to see its CSS properties, including animations and transitions. Copy toast notification styles from any website with 2 clicks.

Get Frontend Hero now →

Browse badge examples →

How to Create Toast Notifications with CSS

What Are Toast Notifications?

When to Use

Key Features

CSS vs JS

Quick Reference

Basic Toast Structure

Live Preview

HTML + CSS Code

Tips

Slide-in Animation

Live Preview

HTML + CSS Code

Tips

Fade-in / Fade-out Animation

Live Preview

HTML + CSS Code

Tips

Toast Variants (Success, Error, Warning, Info)

Live Preview

HTML + CSS Code

Tips

Positioning Options

Live Preview

HTML + CSS Code

Tips

Progress Bar Timer

Live Preview

HTML + CSS Code

Tips

Responsive Sizing

Live Preview

HTML + CSS Code

Tips

Complete Toast System Example

Frequently Asked Questions

More CSS Tutorials

Copy CSS from Website

Center a Div (CSS)

Center a Div (Tailwind)

Convert CSS to Tailwind

Glassmorphism Effect

Neumorphism Button

Responsive Navbar

Sticky Header

CSS Pagination

CSS Accordion

Dropdown Menu

CSS Modal

Hamburger Menu

Animate Gradients

Skeleton Loader

Element Screenshot

Pick Color from Website

Identify Fonts

Download All Images

Measure Elements

Extract Colors from Website

Dark Mode Toggle

Responsive Grid

Center Text in CSS

Make Text Bold

Add Shadow in CSS

Round Corners in CSS

Style File Input

Extract toast styles from any website