Alert Components

Alerts with an × dismiss button — click to slide them away. Works with a tiny JS snippet.

<div class="alert success dismissible" id="myAlert">
  <i class="fa-solid fa-circle-check"></i>
  <span>Payment processed successfully.</span>
</div>

.alert.glass {
  backdrop-filter: blur(18px);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.alert.glass.success {
  color: #00d68f;
  border-left: 4px solid #00d68f;
}

.alert.glass.error {
  color: #ff5c5c;
  border-left: 4px solid #ff5c5c;
}

Futuristic glowing neon alerts inspired by cyberpunk interfaces.

<div class="alert neon-pink">
  <i class="fa-solid fa-bolt"></i>
  <span>Realtime sync enabled.</span>
</div>

.alert.neon-pink {
  background: #120014;
  color: #ff4dff;
  border: 1px solid #ff4dff;
  box-shadow:
    0 0 10px #ff4dff,
    0 0 30px rgba(255,77,255,0.4);
}

.alert.neon-cyan {
  background: #00141a;
  color: #00e5ff;
  border: 1px solid #00e5ff;
  box-shadow:
    0 0 10px #00e5ff,
    0 0 30px rgba(0,229,255,0.4);
}

<div class="progress-alert">
  <div class="progress-alert-top">
    <span>Uploading Assets...</span>
    <span>72%</span>
  </div>

  <div class="progress-bar-wrap">
    <div class="progress-bar-fill"></div>
  </div>
</div>

.progress-alert {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 16px;
}

.progress-bar-wrap {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 12px;
}

.progress-bar-fill {
  height: 100%;
  width: 72%;
  background: linear-gradient(90deg,#6c5ce7,#00cec9);
  border-radius: inherit;
}

AI-inspired smart assistant notifications with futuristic gradients and soft glow.

<div class="ai-alert">
  <div class="ai-alert-icon">
    <i class="fa-solid fa-sparkles"></i>
  </div>

  <div class="ai-alert-body">
    <div class="ai-alert-title">AI Suggestion</div>
    <div class="ai-alert-msg">
      Improve spacing between cards.
    </div>
  </div>
</div>

.ai-alert {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(108,92,231,0.15),
      rgba(0,206,201,0.1)
    );
  border: 1px solid rgba(255,255,255,0.08);
}

.ai-alert-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,#6c5ce7,#00cec9);
  color: #fff;
}

Success Alert

<div class="alert-box alert-success">
  <strong>Success</strong>
  <p>Your order has been placed successfully.</p>
</div>
      

Warning Alert

<div class="alert-box alert-warning">
  <strong>Warning</strong>
  <p>Don’t forget to save your work before closing the browser.</p>
</div>
      

Error Alert

<div class="alert-box alert-error">
  <strong>Error</strong>
  <p>There was an issue submitting the form. Please try again.</p>
</div>
      

Info Alert

<div class="alert-box alert-info">
  <strong>Info</strong>
  <p>This is an informational message. Learn more about our new features.</p>
</div>
      

Critical Alert

<div class="alert-box alert-critical">
  <strong>Critical</strong>
  <p>Immediate action required! Your account has been locked due to suspicious activity.</p>
</div>
      

Pending Alert

<div class="alert-box alert-pending">
  <strong>Pending</strong>
  <p>Your request is being processed. You'll be notified once it's complete.</p>
</div>
      

Dismissible Alert

<div class="alert-box alert-success alert-dismissible">
  <div>
    <strong>Success</strong>
    <p>Your changes have been saved successfully!</p>
  </div>
  <button class="alert-close" onclick="closeAlert(this)">✕</button>
</div>
      

Alert with Icon

<div class="alert-box alert-warning alert-with-icon">
  <span class="alert-icon">⚠️</span>
  <div>
    <strong>Warning</strong>
    <p>Please review your input before proceeding.</p>
  </div>
</div>
      

Compact Alert

<div class="alert-box alert-info alert-compact">
  <strong>Info:</strong> New updates are available.
</div>
      

Left Border Alert

<div class="alert-box alert-success alert-left-border">
  <div>
    <strong>Success</strong>
    <p>Transaction completed successfully!</p>
  </div>
</div>
      

Outlined Alert

<div class="alert-box alert-warning alert-outlined">
  <div>
    <strong>Warning</strong>
    <p>This action cannot be undone.</p>
  </div>
</div>
      

Success Alert Banner

<div class="alert-box alert-success-banner">
  <div class="banner-icon-wrap"><i class="fa-solid fa-circle-check"></i></div>
  <div class="banner-body">
    <strong>Action Completed!</strong>
    <p>Payment of $120.00 processed successfully.</p>
  </div>
  <div class="banner-actions">
    <button class="banner-btn primary">Receipt</button>
    <button class="banner-btn outline">Dismiss</button>
  </div>
</div>
        

Warning Notification Alert

<div class="alert-box alert-warning-notify">
  <i class="fa-solid fa-triangle-exclamation warning-pulse-icon"></i>
  <div class="notify-body">
    <strong>Security Warning</strong>
    <p>Unrecognized login attempt detected.</p>
  </div>
  <button class="notify-close">✕</button>
</div>
        

Error Toast Alert

<div class="alert-box error-toast">
  <div class="toast-main">
    <i class="fa-solid fa-circle-xmark error-icon"></i>
    <div class="toast-body">
      <strong>Upload Failed</strong>
      <p>File size exceeds limit.</p>
    </div>
    <button class="toast-close">✕</button>
  </div>
  <div class="toast-progress"></div>
</div>
        

Glassmorphism Alert Box

<div class="alert-box glass-alert-box">
  <div class="glass-alert-indicator"></div>
  <i class="fa-solid fa-wand-magic-sparkles glass-alert-icon"></i>
  <div class="glass-alert-body">
    <strong>Premium Feature Unlocked</strong>
    <p>Enjoy unlimited active projects and cloud synchronization.</p>
  </div>
</div>
        

Dismissible Floating Alert

<div class="alert-box floating-alert-component" id="floatingAlert">
  <i class="fa-solid fa-bell bell-ring-icon"></i>
  <div class="floating-alert-body">
    <strong>New Update Available</strong>
    <p>Version 2.4.0 is now live.</p>
  </div>
  <button class="floating-alert-close" onclick="closeAlert('floatingAlert')">Dismiss</button>
</div>
        

Success Alert Banner

<div class="alert-box alert-success-banner">
  <div class="banner-icon-wrap"><i class="fa-solid fa-circle-check"></i></div>
  <div class="banner-body">
    <strong>Action Completed!</strong>
    <p>Payment of $120.00 processed successfully.</p>
  </div>
  <div class="banner-actions">
    <button class="banner-btn primary">Receipt</button>
    <button class="banner-btn outline">Dismiss</button>
  </div>
</div>
        

Warning Notification Alert

<div class="alert-box alert-warning-notify">
  <i class="fa-solid fa-triangle-exclamation warning-pulse-icon"></i>
  <div class="notify-body">
    <strong>Security Warning</strong>
    <p>Unrecognized login attempt detected.</p>
  </div>
  <button class="notify-close">✕</button>
</div>
        

Error Toast Alert

<div class="alert-box error-toast">
  <div class="toast-main">
    <i class="fa-solid fa-circle-xmark error-icon"></i>
    <div class="toast-body">
      <strong>Upload Failed</strong>
      <p>File size exceeds limit.</p>
    </div>
    <button class="toast-close">✕</button>
  </div>
  <div class="toast-progress"></div>
</div>
        

Glassmorphism Alert Box

<div class="alert-box glass-alert-box">
  <div class="glass-alert-indicator"></div>
  <i class="fa-solid fa-wand-magic-sparkles glass-alert-icon"></i>
  <div class="glass-alert-body">
    <strong>Premium Feature Unlocked</strong>
    <p>Enjoy unlimited active projects and cloud synchronization.</p>
  </div>
</div>
        

Dismissible Floating Alert

<div class="alert-box floating-alert-component" id="floatingAlert">
  <i class="fa-solid fa-bell bell-ring-icon"></i>
  <div class="floating-alert-body">
    <strong>New Update Available</strong>
    <p>Version 2.4.0 is now live.</p>
  </div>
  <button class="floating-alert-close" onclick="closeAlert('floatingAlert')">Dismiss</button>
</div>
        

Glass Success Alert

<div class="alert-box alert-glass-success" role="alert">
  <div class="ag-icon"><i class="fa-solid fa-check"></i></div>
  <div class="ag-content">
    <strong>Action Completed</strong>
    <p>Your profile has been updated successfully.</p>
  </div>
</div>

Gradient Warning Alert

<div class="alert-box alert-gradient-warning" role="alert">
  <div class="ag-icon"><i class="fa-solid fa-bolt"></i></div>
  <div class="ag-content">
    <strong>Low Battery</strong>
    <p>Your device is at 10%. Please plug in charger.</p>
  </div>
</div>

Cyber Info Alert

<div class="alert-box alert-cyber-info" role="alert">
  <div class="ag-icon"><i class="fa-solid fa-satellite-dish"></i></div>
  <div class="ag-content">
    <strong>Signal Acquired</strong>
    <p>Connection established with orbital satellite.</p>
  </div>
</div>

Notification Alert

3

New Messages

You have 3 unread messages from Sarah.

✕

<div class="alert-box alert-badge-notify" role="alert">
  <div class="abn-avatar">
    <img src="https://i.pravatar.cc/150?img=68" alt="User">
    <span class="abn-badge">3</span>
  </div>
  <div class="ag-content">
    <strong>New Messages</strong>
    <p>You have 3 unread messages from Sarah.</p>
  </div>
  <button class="abn-close">✕</button>
</div>

Stripe Error Alert

<div class="alert-box alert-stripe-error" role="alert">
  <div class="ag-content">
    <strong>Authentication Failed</strong>
    <p>The password you entered is incorrect.</p>
  </div>
</div>

Neumorphic Confirm Alert

<div class="alert-box alert-neumorphic-confirm">
  <div class="nc-icon"><i class="fa-solid fa-trash-can"></i></div>
  <div class="nc-body">
    <strong>Delete Project?</strong>
    <p>This action is irreversible and will purge all repository assets.</p>
    <div class="nc-actions">
      <button class="nc-btn-cancel">Cancel</button>
      <button class="nc-btn-confirm">Delete</button>
    </div>
  </div>
</div>

Console Terminal Alert

<div class="alert-box alert-terminal-log">
  <div class="tl-header">
    <span class="tl-dot red"></span>
    <span class="tl-dot yellow"></span>
    <span class="tl-dot green"></span>
    <span class="tl-title">bash - system_monitor.sh</span>
  </div>
  <div class="tl-console">
    <div class="tl-line"><span class="tl-prompt">guest@uiverse:~$</span> ./check_db.sh</div>
    <div class="tl-line error"><span class="tl-status">[FATAL]</span> Database pool overflowed! 152 active connections.</div>
    <div class="tl-line warning"><span class="tl-status">[WARN]</span> Re-routing traffic to secondary cluster... <span class="tl-cursor"></span></div>
  </div>
</div>

Radar Intrusion Alert

<div class="alert-box alert-radar-threat">
  <div class="rt-radar-wrap">
    <div class="rt-radar-circle circle1"></div>
    <div class="rt-radar-circle circle2"></div>
    <div class="rt-radar-circle circle3"></div>
    <i class="fa-solid fa-circle-exclamation rt-threat-icon"></i>
  </div>
  <div class="rt-body">
    <strong>Intrusion Detected</strong>
    <p>Node 0x4F-A9 bypassed firewall port 8080. Immediate isolation sequence initiated.</p>
  </div>
</div>

Retro Pixel Alert

<div class="alert-box alert-retro-pixel">
  <div class="rp-icon">👾</div>
  <div class="rp-body">
    <strong>STAGE 4 LOCKED</strong>
    <p>Defeat the giant alien boss to acquire additional credits!</p>
  </div>
</div>

Glassmorphic Timer Toast

<div class="alert-box alert-glass-timer-toast">
  <div class="gt-icon-wrap"><i class="fa-solid fa-hourglass-half"></i></div>
  <div class="gt-body">
    <strong>Session Expiring</strong>
    <p>Automatic logout in 30 seconds due to inactivity.</p>
  </div>
  <button class="gt-close">✕</button>
  <div class="gt-progress-track">
    <div class="gt-progress-bar"></div>
  </div>
</div>

Expandable Details Alert

<div class="alert-box alert-expandable-details" id="myExpandableAlert">
  <div class="ed-main">
    <i class="fa-solid fa-bug ed-bug-icon"></i>
    <div class="ed-body">
      <strong>Runtime Exception</strong>
      <p>Unhandled dynamic linker lookup error in libc.so.6.</p>
    </div>
    <button class="ed-toggle-btn" onclick="document.getElementById('myExpandableAlert').classList.toggle('expanded')">Details</button>
  </div>
  <div class="ed-details">
    <div class="ed-details-inner">
      <div class="ed-log-line">Fatal: load_library: could not locate symbol "__pthread_cleanup_push"</div>
    </div>
  </div>
</div>