Notification UI

Modern, responsive notification elements built with clean HTML, CSS, and Vanilla JavaScript. Features premium glassmorphic blur effects, glowing active states, and custom micro-animations.

5 Modern Elements Glass & Glows 100% Responsive

Live Preview Active

Backup Required

Your database was last backed up 7 days ago.

Toast Notification

Interactive

Premium dark toast banner featuring high-contrast colored warning indicator, progress timer, and exit scale movements.

<!-- HTML -->
<div class="premium-toast warning">
  <div class="toast-icon">
    <i class="fa-solid fa-triangle-exclamation"></i>
  </div>
  <div class="toast-content">
    <h4 class="toast-title">Backup Required</h4>
    <p class="toast-desc">Your database was last backed up 7 days ago.</p>
  </div>
  <button class="toast-close-btn"><i class="fa-solid fa-xmark"></i></button>
  <div class="toast-progress-bar"></div>
</div>

/* CSS */
.premium-toast {
  position: relative;
  background: #131722;
  border-left: 4px solid #f97316;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  overflow: hidden;
  max-width: 350px;
}
.toast-progress-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: #f97316;
  animation: drainProgress 4s linear forwards;
}
@keyframes drainProgress {
  to { width: 0; }
}

Payment Successful

Your premium upgrade is active! Invoice #2061 sent to your email.

Success Alert Notification

Premium Glow

Vibrant inline banner using a translucent matrix styling, bouncing tick animation, and glowing outer drop shadows.

<!-- HTML -->
<div class="premium-alert-success">
  <div class="alert-glow"></div>
  <div class="alert-icon-wrapper">
    <i class="fa-solid fa-circle-check"></i>
  </div>
  <div class="alert-text">
    <h4 class="alert-title">Payment Successful</h4>
    <p class="alert-desc">Your premium upgrade is active! Invoice #2061 sent.</p>
  </div>
  <button class="alert-close"><i class="fa-solid fa-xmark"></i></button>
</div>

/* CSS */
.premium-alert-success {
  position: relative;
  background: rgba(16,185,129,0.06);
  border: 1px solid rgba(16,185,129,0.18);
  border-radius: 18px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 0 30px rgba(16,185,129,0.05);
}
.alert-icon-wrapper i {
  font-size: 24px;
  color: #10b981;
  animation: tickBounce 0.6s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes tickBounce {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

Sophia Martinez Just now

New Mention

Hey! I reviewed the design layout for UI-Verse. It looks extremely premium! Let's schedule a call to finalize the glassmorphism parameters. ✨

Message Notification Card

Interactive

Premium user avatar layout featuring real-time blinking online status, and sliding text reply input drawers.

<!-- HTML -->
<div class="premium-msg-card">
  <div class="msg-header">
    <div class="msg-avatar-wrapper">
      <img src="avatar.jpg" class="msg-avatar">
      <span class="presence-dot online"></span>
    </div>
    <div class="msg-user-details">
      <span class="msg-username">Sophia Martinez</span>
      <span class="msg-time">Just now</span>
    </div>
  </div>
  <p class="msg-text">Hey! I reviewed the design layout for UI-Verse...</p>
  <div class="msg-actions">
    <button class="msg-btn reply-trigger">Reply</button>
    <button class="msg-btn dismiss-btn">Dismiss</button>
  </div>
</div>

/* CSS */
.presence-dot.online {
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: presencePulse 2s infinite ease-in-out;
}
@keyframes presencePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

Floating Notification

Dynamic Pill

Sleek pill-shaped banner overlay with vibrant linear-gradients, mini logo badging, and customizable micro-actions.

<!-- HTML -->
<div class="premium-floating-popup">
  <div class="popup-brand-badge">
    <i class="fa-solid fa-wand-magic-sparkles"></i>
    <span>AI Engine</span>
  </div>
  <div class="popup-info">
    <h5 class="popup-title">Neural Engine Active</h5>
    <p class="popup-desc">Model loaded. Generating ambient designs...</p>
  </div>
  <div class="popup-actions">
    <button class="popup-btn view">Configure</button>
    <button class="popup-close-btn"><i class="fa-solid fa-xmark"></i></button>
  </div>
</div>

/* CSS */
.premium-floating-popup {
  background: rgba(18, 22, 38, 0.7);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 40px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.3);
}

Cloud Synced

2.4 MB updated

Your local changes have been successfully merged with the upstream main repository.

Glassmorphism UI

Premium Glass

Stunning frosted-glass panel relying on backdrop filters, subtle gradient overlays, and dynamic glass reflection glows.

<!-- HTML -->
<div class="premium-glass-card">
  <div class="glass-bg-glow"></div>
  <div class="glass-header">
    <div class="glass-icon-box">
      <i class="fa-solid fa-cloud-arrow-up"></i>
    </div>
    <div class="glass-title-area">
      <h4 class="glass-title">Cloud Synced</h4>
      <span class="glass-subtitle">2.4 MB updated</span>
    </div>
  </div>
  <p class="glass-content">Your local changes have been successfully merged...</p>
</div>

/* CSS */
.premium-glass-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 24px;
  overflow: hidden;
}
.glass-bg-glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(123,97,255,0.2) 0%, transparent 70%);
  border-radius: 50%;
}

Notification Stack 3 New

High CPU Alert Instance-12 is running at 98% load capacity.

PR Approved Pull request #324 has been merged into main.

Deploy Successful Production environment updated, all health-checks passed.

Stacked Center

Interactive Stacking

A space-saving pile of notifications that spreads dynamically into a detailed vertical list with staggered transitions on hover or click.

<!-- HTML -->
<div class="premium-stacked-center">
  <div class="stacked-header">
    <span class="stacked-title">Notification Stack</span>
    <span class="stacked-badge">3 New</span>
  </div>
  <div class="stacked-cards-container">
    <div class="stacked-card-item card-top-item">...</div>
    <div class="stacked-card-item card-middle-item">...</div>
    <div class="stacked-card-item card-bottom-item">...</div>
  </div>
</div>

System Activity Real-time

Marcus V. launched server Node Alpha in us-east-1 Just now

Sarah Connor uploaded a new 2.5MB high-res profile avatar 10 min ago

System Backup successfully exported database logs to AWS S3 bucket 1 hour ago

Activity Feed

Dynamic Feed Timeline

A chronological, high-fidelity activity dashboard with glowing node pulses, active connecting timelines, and micro-hover transformations.

<!-- HTML -->
<div class="premium-activity-feed">
  <div class="feed-timeline">
    <div class="timeline-line"></div>
    <div class="feed-item">
      <div class="feed-marker pulse-green"></div>
      <div class="feed-avatar">...</div>
      <div class="feed-content">...</div>
    </div>
  </div>
</div>

Error Diagnostics

java.sql.SQLTransientConnectionException: HikariPool-1
  at com.zaxxer.hikari.pool.HikariPool.getConnection(HikariPool.java:218)
  at org.hibernate.engine.jdbc.connections.internal.DatasourceConnectionProviderImpl
  at threadpool.executor.Worker.run(Worker.java:62)

Expandable Alert

Interactive Crash Logs

A collapsing error banner showing simple warnings that slides open to reveal detailed raw telemetry log dumps and debugging utilities.

<!-- HTML -->
<div class="premium-system-alert danger">
  <div class="alert-banner" onclick="toggleDiagnosticAlert()">
    <div class="alert-icon-wrap"><i class="fa-solid fa-triangle-exclamation"></i></div>
    <div class="alert-brief">...</div>
    <button class="alert-toggle-btn"><i class="fa-solid fa-chevron-down"></i></button>
  </div>
  <div class="alert-collapsible-wrapper">
    <div class="alert-details-content">...</div>
  </div>
</div>

video_rendering_v2.mp4 84.2 MB · Uploading

0% Est: 14s remaining

Progress Upload

Interactive Progress

A clean live-to-browser asset loading indicator featuring simulated background transfers, pausing, and status checks.

<!-- HTML -->
<div class="premium-progress-upload">
  <div class="upload-header">
    <div class="upload-icon-box"><i class="fa-solid fa-file-arrow-up"></i></div>
    <div class="upload-title-area">...</div>
  </div>
  <div class="upload-progress-section">
    <div class="upload-progress-bar-track">
      <div class="upload-progress-fill" style="width: 0%;"></div>
    </div>
  </div>
</div>

Chat Bubble

Interactive Chat Window

A floating message bubble with real-time unread counts that transitions smoothly into a glassmorphic chat thread with keyboard message insertion.

<!-- HTML -->
<div class="premium-chat-bubble-container">
  <div class="chat-bubble-trigger" onclick="toggleChatBubbleWindow()">
    <img src="avatar.png" class="bubble-avatar">
    <span class="chat-unread-badge">2</span>
  </div>
  <div class="chat-popover-window">
    <div class="chat-window-header">...</div>
    <div class="chat-messages-body">...</div>
    <div class="chat-input-footer">...</div>
  </div>
</div>

Sticky Banner

Banners

A compact persistent banner ideal for global maintenance alerts and account notices.

<div class="sticky-banner">
  <div class="sb-left"><i class="fa-solid fa-bell"></i> <strong>Maintenance Window</strong></div>
  <button class="sb-cta">View Details</button>
</div>

Settings saved

Inline Snackbar

Snackbars

Small inline confirmation with optional undo action for quick interactions.

<div class="inline-snackbar">
  <div class="snack-msg">Settings saved</div>
  <button class="snack-action">Undo</button>
</div>

Modal Alert

Critical

Centered modal-style alert for urgent system-wide notifications (preview only).

<div class="critical-modal">
  <h4>Critical: Service Degraded</h4>
  <p>Multiple regions reporting increased latency.</p>
  <div class="modal-actions">...</div>
</div>

Progress List

Multi-Progress

A vertical list of short progress toasts for concurrent transfers and background tasks.

<div class="progress-toast-item"><div class="progress-thumb"></div><div class="progress-line"><div class="progress-fill" style="width:40%"></div></div></div>

+12

Avatar Cluster

Groups

Compact representation of multiple participants or recipients with stacked avatars and overflow counts.

<div class="avatar-cluster"><div class="avatar-stack">...</div><div class="avatar-count">+12</div></div>