Back

Creating an Avatar with Notification Badge

Learn how to implement a profile avatar with a dynamic notification badge that displays unread counts for messages, alerts, or other updates.

HTML

The HTML structure for our notification badge avatar consists of an outer container div, an avatar wrapper div, an image element, and a notification badge div that displays the count of unread messages or notifications.


        <div class="avatar-container">
          <div class="avatar">
            <img src="..." alt="User profile" class="avatar-img">
            <div class="notification-badge">8</div>
          </div>
        </div>

The image source URL should point to the user's profile picture. The number inside the notification badge div represents the current count of unread notifications, messages, or other alerts.

CSS

First, we set up the container to center our avatar:


        .avatar-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

Next, we style the avatar wrapper with relative positioning (important for placing the badge) and define CSS variables for easy customization:


        .avatar {
            position: relative;
            --avatar-size: 80px;
            --badge-size: 24px;
            --badge-color: #EF4444;
            --badge-text-color: white;
            
            width: var(--avatar-size);
            height: var(--avatar-size);
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: transform 0.2s;
        }

        .avatar:hover {
            transform: scale(1.05);
        }

We've added a subtle hover effect that slightly enlarges the avatar when hovered, adding an interactive feel to the component. For the image itself, we ensure it covers the circular container properly:


        .avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

Now for the most important part - the notification badge. We style it as a small colored circle positioned at the top-right of the avatar, with some special effects:


        .notification-badge {
            position: absolute;
            top: 0;
            right: 0;
            min-width: var(--badge-size);
            height: var(--badge-size);
            padding: 0 8px;
            border-radius: 12px;
            background-color: var(--badge-color);
            color: var(--badge-text-color);
            font-family: sans-serif;
            font-weight: 600;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            /* Animation */
            animation: pulse 2s infinite;
        }

The key features of our notification badge: - It's positioned in the top-right corner of the avatar - The min-width ensures it can accommodate larger numbers - The white border helps it stand out against any background - We've added a subtle box-shadow for depth - The badge has a gentle pulsing animation to draw attention To create the pulsing animation, we define a keyframes rule:


        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

This animation subtly scales the badge up and down continuously, creating a pulsing effect that draws the user's attention without being too distracting. This notification badge avatar offers several advantages: - Immediate awareness: Users can instantly see if they have new notifications without checking a separate area. - Visual priority: The bright color and animation naturally draw the eye, making it hard to miss important updates. - Space efficiency: The badge uses minimal space while conveying important information. - Customization: Using CSS variables, you can easily adjust the size, colors, and other properties to match your design system. - Scalability: The flexible design works for both single-digit and multi-digit notification counts. This avatar design is ideal for social networks, messaging apps, email clients, forums, or any application where users need to be alerted about new activity related to their account.

Whole code

<div class="avatar-container">
  <div class="avatar">
    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80" alt="User profile" class="avatar-img">
    <div class="notification-badge">8</div>
  </div>
</div>

<style>
.avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar {
  position: relative;
  --avatar-size: 80px;
  --badge-size: 24px;
  --badge-color: #EF4444;
  --badge-text-color: white;
  
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s;
}

.avatar:hover {
  transform: scale(1.05);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: var(--badge-size);
  height: var(--badge-size);
  padding: 0 8px;
  border-radius: 12px;
  background-color: var(--badge-color);
  color: var(--badge-text-color);
  font-family: sans-serif;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Animation */
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>

Thank you for reading this article.

Creating an Avatar with Notification Badge

HTML

CSS

Whole code

Comments

More avatars

Similar

See also