CSS Alerts & Toasts Effects

Inline alert with a blue accent rail and a tinted background wash.

Solid ocean toast that drops in with a spring and keeps a blinking status dot.

Frosted toast with an ocean bar draining along the bottom to show time until dismiss.

Status pill with a blue dot that emits an expanding ping ring.

Three toasts collapsed into a depth stack with the newest in front — the sonner-style notification pile, in ocean.

Site-wide banner with a blue light sweeping along its top edge — attention without a modal.

Inline announcement with an ocean accent rail, info glyph and a rotating close button.

Confirmation carrying its own reversal, with a timer bar draining by `scaleX` so the countdown animates on the compositor rather than on width.

Background-job notice carrying a spinner, a bar and a numeric read-out, so the same toast covers both indeterminate and measured phases.

Persistent network notice with a pinging indicator and a manual retry, sized as a bar rather than a toast because it does not auto-dismiss.

Failure banner that keeps the stack trace folded behind a disclosure, so the summary stays one line and the detail is one click away rather than a separate screen.

Per-category cookie controls rather than one accept button, with the essential row switched on and visibly locked so the choice that is not a choice reads as such.

A warning alert edged with diagonal hazard stripes that scroll and a caution icon that tilts on hover.

Validation roll-up counting the problems in a form and listing each one as a link back to the field that caused it.

Payment failure notice built around a miniature credit card with a stripe, chip and rejection badge, the card flinching every few seconds as if the reader pushed it back.

Field-level message that says what is wrong and what to do about it, keyed by a thick left rule so it scans as attached to the input above.

Cookie notice giving both choices equal size, since a decline styled as an afterthought is the pattern regulators actually object to.

Confirmation whose tick springs in from its own corner on an overshoot, so the mark lands rather than simply appearing.

Consent bar in the shape a browser uses for it — origin under the ask, block and allow weighted differently, the whole thing sized to sit under an address bar.

Social notification carrying who, what they said and two ways to respond, sized so the quoted line can wrap without pushing the actions off the card.

A game-style unlock toast with a round trophy badge that wobbles and a shimmer that sweeps across on hover.

Quiet hint panel with a small bulb in the gutter that lights up warm amber when the callout is hovered.

Toast that carries a three-stage pipeline along its foot, the connecting rail filling from left to right and each stage node lighting cyan as the deploy reaches it.

A sky-blue app-update toast with a pinging status dot and a restart button that brightens and swells on hover.

Review request notice showing who asked and what changed, with paired approve and request-changes actions along the foot.

Version-control notice whose body is a two-line diff, the incoming and outgoing versions stacked in red and green and each side lighting up as you point at it.

A rose error alert built on a details element that expands to reveal a compact stack trace when clicked.

Amber alert carrying its own usage meter, the fill gently throbbing to show how little of the allowance is left.

Throttling notice showing the allowance as ten discrete tokens rather than a bar, each pip flashing bright as it drops back into the bucket one at a time.

An orange announcement bar with a LIVE tag and an edge-faded marquee message that scrolls continuously and pauses on hover.

A pill toast with an overlapping avatar cluster that fans apart on hover to announce who just joined.