Category · Widgets Difficulty Level · Beginner Published on · August 22, 2025

Animated Notification Badge

Modern notification badge with smooth animations, customizable styles, and interactive features, perfect for user notifications and alerts.

#notification #badge #animation #alert #ui

Responsive Design

Yes

Dark Mode Support

lines

473

Browser Compatibility

Chrome · Firefox · Safari · Edge

Live Preview

Interact with the component without leaving the page.

200px

Overview

Modern notification badge with smooth animations, customizable styles, and interactive features, perfect for user notifications and alerts.

How to use

Copy the HTML markup into your page.
Paste the CSS into your stylesheet and ensure the selectors match your markup.
Paste the JavaScript and load it after the markup.
Adjust spacing, colors, and text to match your design system.

Customization tips

Rename class names to avoid collisions with your existing CSS.
Replace hard-coded colors with CSS variables for theming.
Verify the layout at 320px, 768px, and 1024px widths.

HTML

lines

CSS

291

lines

JavaScript

135

lines

                <div class="notification-badge-container">
  <div class="notification-badge-demo">
    <div class="demo-header">
      <h2>Notification Badges</h2>
      <p>Interactive badges with animations</p>
    </div>
    
    <div class="badges-wrapper">
      <div class="badge-item">
        <div class="icon-wrapper">
          <span class="icon">🔔</span>
          <span class="notification-badge" id="notificationBadge1">3</span>
        </div>
        <div class="badge-label">Messages</div>
      </div>
      
      <div class="badge-item">
        <div class="icon-wrapper">
          <span class="icon">📧</span>
          <span class="notification-badge success" id="notificationBadge2">5</span>
        </div>
        <div class="badge-label">Emails</div>
      </div>
      
      <div class="badge-item">
        <div class="icon-wrapper">
          <span class="icon">🛒</span>
          <span class="notification-badge warning" id="notificationBadge3">12</span>
        </div>
        <div class="badge-label">Cart</div>
      </div>
      
      <div class="badge-item">
        <div class="icon-wrapper">
          <span class="icon">❤️</span>
          <span class="notification-badge error" id="notificationBadge4">7</span>
        </div>
        <div class="badge-label">Likes</div>
      </div>
    </div>
    
    <div class="controls-wrapper">
      <button class="btn btn-primary" id="addNotificationBtn">Add Notification</button>
      <button class="btn btn-secondary" id="clearNotificationsBtn">Clear All</button>
    </div>
  </div>
</div>

              

                .notification-badge-container {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  padding: 40px 20px;
  border-radius: 20px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.notification-badge-demo {
  background: white;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}

.demo-header {
  text-align: center;
  margin-bottom: 30px;
}

.demo-header h2 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 2rem;
  font-weight: 700;
}

.demo-header p {
  color: #666;
  font-size: 1.1rem;
  margin: 0;
}

.badges-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 30px;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.icon-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.icon-wrapper:hover {
  background: #f1f5f9;
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.icon {
  font-size: 2rem;
  transition: all 0.3s ease;
}

.icon-wrapper:hover .icon {
  transform: scale(1.1);
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
  animation: bounceIn 0.6s ease-out;
}

.notification-badge.success {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  box-shadow: 0 3px 10px rgba(39, 174, 96, 0.3);
}

.notification-badge.warning {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  box-shadow: 0 3px 10px rgba(243, 156, 18, 0.3);
}

.notification-badge.error {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  box-shadow: 0 3px 10px rgba(231, 76, 60, 0.3);
}

.notification-badge.pulse {
  animation: pulse 2s infinite;
}

.notification-badge.bounce {
  animation: bounce 0.6s ease-out;
}

.badge-label {
  color: #666;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.icon-wrapper:hover .badge-label {
  color: #333;
  transform: translateY(-2px);
}

.controls-wrapper {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: #f1f5f9;
  color: #666;
}

.btn-secondary:hover {
  background: #e2e8f0;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translate(0, 0);
  }
  40% {
    transform: translate(0, -10px);
  }
  60% {
    transform: translate(0, -5px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.badge-item {
  animation: fadeIn 0.6s ease-out;
}

.badge-item:nth-child(1) { animation-delay: 0.1s; }
.badge-item:nth-child(2) { animation-delay: 0.2s; }
.badge-item:nth-child(3) { animation-delay: 0.3s; }
.badge-item:nth-child(4) { animation-delay: 0.4s; }@media (max-width: 768px) {
  .notification-badge-container {
    padding: 30px 15px;
  }
  
  .notification-badge-demo {
    padding: 25px;
  }
  
  .demo-header h2 {
    font-size: 1.7rem;
  }
  
  .badges-wrapper {
    gap: 20px;
  }
  
  .icon-wrapper {
    width: 70px;
    height: 70px;
  }
  
  .icon {
    font-size: 1.7rem;
  }
  
  .notification-badge {
    width: 25px;
    height: 25px;
    font-size: 0.7rem;
  }
  
  .controls-wrapper {
    flex-direction: column;
    gap: 10px;
  }
  
  .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .badges-wrapper {
    gap: 15px;
  }
  
  .icon-wrapper {
    width: 60px;
    height: 60px;
  }
  
  .icon {
    font-size: 1.5rem;
  }
  
  .badge-label {
    font-size: 0.8rem;
  }
}

              

                document.addEventListener('DOMContentLoaded', function() {

  const notificationBadges = document.querySelectorAll('.notification-badge');
  const addNotificationBtn = document.getElementById('addNotificationBtn');
  const clearNotificationsBtn = document.getElementById('clearNotificationsBtn');
  const iconWrappers = document.querySelectorAll('.icon-wrapper');

  addNotificationBtn.addEventListener('click', function() {

    notificationBadges.forEach(badge => {
      const currentCount = parseInt(badge.textContent);
      const newCount = currentCount + Math.floor(Math.random() * 3) + 1;
      updateBadgeCount(badge, newCount);

      badge.classList.add('bounce');
      setTimeout(() => {
        badge.classList.remove('bounce');
      }, 600);
    });

    notificationBadges.forEach(badge => {
      badge.classList.add('pulse');
      setTimeout(() => {
        badge.classList.remove('pulse');
      }, 2000);
    });
  });

  clearNotificationsBtn.addEventListener('click', function() {

    notificationBadges.forEach(badge => {
      updateBadgeCount(badge, 0);

      badge.style.animation = 'fadeOut 0.3s ease';
      setTimeout(() => {
        badge.style.animation = '';
      }, 300);
    });

    showMessage('All notifications cleared!', 'success');
  });

  iconWrappers.forEach((wrapper, index) => {
    wrapper.addEventListener('click', function() {
      const badge = notificationBadges[index];
      const currentCount = parseInt(badge.textContent);
      
      if (currentCount > 0) {

        const newCount = currentCount - 1;
        updateBadgeCount(badge, newCount);

        badge.classList.add('bounce');
        setTimeout(() => {
          badge.classList.remove('bounce');
        }, 600);

        const iconName = wrapper.querySelector('.icon').textContent;
        showMessage(`Notification dismissed from \${iconName}`, 'info');
      } else {

        showMessage('No notifications to dismiss', 'warning');
      }
    });
  });

  function updateBadgeCount(badge, count) {
    if (count > 0) {
      badge.textContent = count > 99 ? '99+' : count;
      badge.style.display = 'flex';
    } else {
      badge.textContent = '0';
      badge.style.display = 'none';
    }
  }

  function showMessage(text, type) {

    const message = document.createElement('div');
    message.className = `message \${type}`;
    message.textContent = text;
    message.style.cssText = `
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: \${getMessageColor(type)};
      color: white;
      padding: 15px 25px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.3s ease;
      font-weight: 500;
    `;
    
    document.body.appendChild(message);

    setTimeout(() => {
      message.style.transform = 'translateY(0)';
      message.style.opacity = '1';
    }, 100);

    setTimeout(() => {
      message.style.transform = 'translateY(20px)';
      message.style.opacity = '0';
      setTimeout(() => {
        document.body.removeChild(message);
      }, 300);
    }, 3000);
  }

  function getMessageColor(type) {
    switch(type) {
      case 'success':
        return 'linear-gradient(135deg, #27ae60 0%, #2ecc71 100%)';
      case 'warning':
        return 'linear-gradient(135deg, #f39c12 0%, #e67e22 100%)';
      case 'error':
        return 'linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)';
      default:
        return 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
    }
  }

  setTimeout(() => {
    notificationBadges.forEach(badge => {
      badge.classList.add('pulse');
      setTimeout(() => {
        badge.classList.remove('pulse');
      }, 2000);
    });
  }, 1000);
});

              

Browser Compatibility

Chrome

>= 50

Firefox

>= 45

Safari

>= 10

Edge

>= 15

Markdown to HTML Converter

Privacy Policy Generator

Animated Notification Badge

Live Preview

Overview

How to use

Customization tips

Browser Compatibility

Related Code Snippets

Magnetic Attraction Pricing Table

Animated Back to Top Button

Animated Chat Interface

Explore template packs