CSS Showcase · Live Demo

Four toasts. Many placements per device.

Pick a device, then pick a placement pattern for that device — desktop offers top-right, bottom-right, and centered banner; mobile offers a full-width snackbar and a top inline banner.

Featured demo

mobile · bottom-full
Changes saved
Your profile is up to date.
×
Upload failed
File exceeds 25 MB limit.
×
Session ending soon
You'll be signed out in 2 min.
×
New version available
Refresh to load v2.4.0.
×

mobile design patterns

Toggle variants

toasts-bottom-full.css
/* Bottom full-width snackbar */
.toast-stack {
  container-type: inline-size;
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  gap: .25rem;
}

.toast {
  width: 100%;
  border-radius: .5rem .5rem 0 0;
}

CSS features used

  • • Container queries
  • • data-* variants
  • • aspect-ratio frames
  • • Grid auto-flow stack
  • • Semantic tokens
  • • Smooth transitions