Glass Notification
A stack of three glass notifications — success, info, warning — that slide in 30 px with a 0.15 s stagger, each with its tinted icon, pulsing dot and close cross; pure CSS, with an entrance set so they never flash before sliding.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Glassmorphism has 47 effects, including 6 free. Explore the category →
3 usage examples
How it works
A 340 × 200 px .glass-notif-scene column (flex, 10 px gap) stacking three 290 px .glass-notif toasts over two still glows blurred at 50 px (a 120 px cyan #22d3ee top right, a 100 px violet #a855f7 bottom left, at 50% opacity). Each toast is 7% white with backdrop-filter: blur(20px) and its -webkit- prefix, 10% white border, 12 px corners, 12 × 14 px padding, and three columns: an icon in a 32 px square tinted at 15% of its color (✓ green #22c55e, ⓘ cyan #06b6d4, ⚠ amber #f59e0b), a 12 px weight-600 title and 10.4 px text at 50% white, and a 20 px cross. A 6 px dot in the type's color, with its glow, pulses in the top-right corner (notifPulse, 2 s, opacity 1 → 0.4 → 1).
The entrance: notifSlideIn slides each toast 30 px to the left while fading from transparent to opaque, over 0.5 s ease-out. The first starts at once, the other two wait 0.15 and 0.3 s (delays set inline in the HTML), which makes the cascade. On hover, a toast shifts 4 px to the right over 0.3 s (measured in Chromium and Firefox), and the cross brightens when hovered itself. The animation plays once, when the toast appears in the page: on load, or later if you insert it by script — which is how a real notification arrives.
The entrance uses animation-fill-mode: backwards, and that setting is what makes the cascade work. With no fill mode (none), toasts 2 and 3 would show at full opacity during their delay, then vanish at once when the animation starts before sliding in — measured, opacity 1 at 100 ms for the second and at 250 ms for the third. With backwards, each toast keeps its starting state (transparent, offset by 30 px) during its delay: opacity 0 at the same instants. Not both either: keeping the final state applied after the animation would override the 4 px hover shift (measured: hover stuck at 0 px with both). The blur has its -webkit-backdrop-filter form for Safari before 18. No JavaScript: the cross closes nothing (see the FAQ).
Accessibility
- Screen reader announcement: nothing is declared. A notification that appears should be announced: put the stack inside a
role="status"(oraria-live="polite") container present from page load, and insert toasts into it by script; for an urgent alert,role="alert"on the toast. The ✓ ⓘ ⚠ icons are read as is: addaria-hidden="true"and let the title carry the meaning ("Success", "Warning"). - Close cross: a 20 px
divwith "✕" at 40% white — contrast measured between 2.6:1 and 3.1:1, under the 3:1 threshold for interface elements, and out of keyboard reach. Replace it with<button type="button" aria-label="Close">, raise its color to 70% and enlarge its hit area to at least 24 px. - Text contrast: titles 13.8 to 15.6:1, 10.4 px text between 4.7 and 5.0:1 (measured). The text passes, but 10.4 px is small: 12 px reads better without changing the layout. Color is not alone in carrying the message type: the icon and the title say it too.
- No prefers-reduced-motion in the code: the sliding entrance and the dot pulse continue under emulation. Add
@media (prefers-reduced-motion: reduce) { .glass-notif { animation: none } .glass-notif-dot { animation: none } }: toasts appear directly, dots stay lit.
Browser compatibility
CSS only: backdrop-filter (+ -webkit-), filter: blur(), @keyframes with animation-fill-mode: backwards and inline delays, flexbox. Zero JavaScript, zero dependency. Backdrop blur: Chrome 76+, Edge 79+, Firefox 103+, Safari 9+ prefixed (prefix included in the code), unprefixed since Safari 18. Measured in Chromium 151 and Firefox 153: same entrance opacities at the same instants (0 → 0.31 → 0.68 → 1), 4 px hover shift, pulsing dots. The blur is only painted in Chromium's screenshots; Firefox and WebKit 26.5 under Playwright compute it (blur(20px)) without drawing it, even on a minimal test.
Without backdrop blur, each toast stays a 7% white veil over the background: over a video feed or a detailed map, the text reads less well. Plan a more opaque tint (rgba(20,22,30,.75)) inside @supports not (backdrop-filter: blur(1px)).
The code
HTML structure to paste into your page (the CSS + JS come with Premium):
<div class="demo-preview">
<div class="glass-notif-scene">
<div class="glass-notif-orb glass-notif-orb--1"></div>
<div class="glass-notif-orb glass-notif-orb--2"></div>
<div class="glass-notif glass-notif--success">
<span class="glass-notif-dot"></span>
<div class="glass-notif-icon">✓</div>
<div class="glass-notif-body">
<h4>…</h4>
<p>…</p>
</div>
<div class="glass-notif-close">✕</div>
</div>
<div class="glass-notif glass-notif--info" style="animation-delay: 0.15s;">…</div>
<div class="glass-notif glass-notif--warning" style="animation-delay: 0.3s;">…</div>
</div>
</div>The full HTML + CSS + JS of Glass Notification, ready to paste — plus all 840 effects. Or $299 once, lifetime access.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Entrance cascade (HTML — style="animation-delay: 0.15s", 0.3s) |
0, 0.15 and 0.3 s | Keep animation-fill-mode: backwards (in the animation shorthand) if you change the delays: without it, a waiting toast shows fully before sliding in. For a toast added alone by script, remove the delay. |
Slide (CSS — @keyframes notifSlideIn { 0% { transform: translateX(30px); opacity: 0 } }) |
30 px from the right, 0.5 s ease-out |
For a stack at the top of the screen, enter from above (translateY(-16px)); for a stack on the left, translateX(-30px) and a translateX(-4px) hover. |
Message types (CSS — .glass-notif--success, --info, --warning) |
green #22c55e, cyan #06b6d4, amber #f59e0b |
Each type sets the icon tint (15% background, 20% border) and the dot. Add an error type on the same model: .glass-notif--error .glass-notif-icon { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.2) } with its dot in #ef4444. |
Dot (CSS — .glass-notif-dot, notifPulse 2s) |
6 px, opacity 1 → 0.4, 2 s, on all three toasts | Keep the pulse for messages that need action: .glass-notif--success .glass-notif-dot { animation: none }. A dot that pulses on everything sets nothing apart. |
Glass (CSS — background: rgba(255,255,255,.07), backdrop-filter: blur(20px)) |
7% white, 20 px | Over a light video feed or a bright map, switch to rgba(20,22,30,.45). Raise the blur to 28 px over a very detailed background (map, text). |
Stack width and position (CSS — .glass-notif { width: 290px }, .glass-notif-scene) |
290 px, centered 340 × 200 px column | In an app, place the column with position: fixed; right: 16px; top: 16px and height: auto, and leave the glows out: the page behind colors the glass. |
FAQ
.glass-notif and insert it into the column: the entrance animation plays on its own on insertion. To close, replace the cross with a <button> that removes its toast (btn.closest('.glass-notif').remove()); for auto-dismiss, a 5 to 8 s setTimeout on success messages, never on a warning. And remember the role="status" container so arrivals are announced.none, it takes its normal style, fully visible, then the animation starts at opacity 0, offset by 30 px — it disappears and comes back sliding (measured: opacity 1 at 100 ms for the second toast, 0 with backwards). backwards applies the starting state during the delay. both would do the same, but would also keep the final state after the animation, which overrides the 4 px hover shift. If you change the animation, keep backwards in the animation line of .glass-notif.
