Back

Creating an Avatar with Achievement Badges

Learn how to build a gamified profile avatar that showcases user achievements and rewards with animated decorative badges.

HTML

The HTML structure for our achievement badge avatar consists of a container, an achievement avatar wrapper, four badge elements positioned around the avatar, the avatar image, and elements for the username and level display.


        <div class="avatar-container">
          <div class="achievement-avatar">
            <span class="badge top-badge" title="Top Contributor">
              <svg...></svg>
            </span>
            <span class="badge right-badge" title="Verified Member">
              <svg...></svg>
            </span>
            <span class="badge bottom-badge" title="One Year Member">
              <svg...></svg>
            </span>
            <span class="badge left-badge" title="Premium Member">
              <svg...></svg>
            </span>
            <div class="avatar-image">
              <img src="..." alt="Profile photo">
            </div>
            <div class="username">Emma Wilson</div>
            <div class="level">Level 42</div>
          </div>
        </div>

Each badge contains an SVG icon representing a different achievement or status. The title attribute provides a tooltip when hovering over each badge. We've used simple SVG icons for star, check, clock, and verified symbols, but you can replace these with any SVG icons that represent your specific achievements.

CSS

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


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

Next, we define the achievement avatar wrapper with CSS variables for easy customization:


        .achievement-avatar {
            --avatar-size: 90px;
            --badge-size: 32px;
            --primary-color: #8B5CF6;
            --secondary-color: #F59E0B;
            
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: calc(var(--avatar-size) + var(--badge-size));
        }

We're setting the wrapper width to accommodate the avatar plus the badges on either side. Now we style the avatar image with a circular border:


        .avatar-image {
            width: var(--avatar-size);
            height: var(--avatar-size);
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid var(--primary-color);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 1;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .achievement-avatar:hover .avatar-image {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .avatar-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

We set z-index: 1 on the avatar to ensure it appears above any badges that might overlap with it. We also add a nice hover effect that slightly scales up the avatar and enhances its shadow. Next comes the styling for the achievement badges:


        .badge {
            position: absolute;
            width: var(--badge-size);
            height: var(--badge-size);
            border-radius: 50%;
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            border: 2px solid;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            z-index: 2;
        }

        .badge:hover {
            transform: scale(1.15);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

Each badge is a circular element with a colored border and white background. We've made them interactive with a cursor: pointer and a hover effect that scales them up slightly. Now we position each badge around the avatar:


        .top-badge {
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            border-color: gold;
            color: gold;
            animation: pulse 2s infinite;
        }

        .right-badge {
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            border-color: #10B981;
            color: #10B981;
        }

        .bottom-badge {
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            border-color: #3B82F6;
            color: #3B82F6;
        }

        .left-badge {
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            border-color: #8B5CF6;
            color: #8B5CF6;
        }

Each badge has its own position and color scheme. The top badge (gold star) has a special pulsing animation to draw attention to it as the most prestigious achievement. We style the username and level text below the avatar:


        .username {
            margin-top: calc(var(--badge-size) / 2 + 5px);
            font-family: sans-serif;
            font-weight: 600;
            font-size: 16px;
            color: #1F2937;
        }

        .level {
            margin-top: 2px;
            font-family: sans-serif;
            font-size: 14px;
            color: var(--primary-color);
            font-weight: 500;
        }

Finally, we define the pulsing animation for the top badge:


        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
            }
        }

This creates a subtle pulsing glow effect around the top badge. This achievement badge avatar offers several advantages: - Gamification element: It introduces rewards and recognition to your platform, encouraging user engagement. - Visual progression: Users can see their status and achievements at a glance, providing a sense of accomplishment. - Informational hierarchy: The different badge positions and colors create a natural hierarchy of importance. - Interactive engagement: The hover effects and tooltips invite users to explore their achievements. - Customizable system: The modular design makes it easy to add, remove, or change badges as your achievement system evolves. This avatar design is particularly well-suited for community platforms, educational sites, gaming applications, or any service that uses gamification to drive user engagement and retention.

Whole code

<div class="avatar-container">
  <div class="achievement-avatar">
    <span class="badge top-badge" title="Top Contributor">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
    </span>
    <span class="badge right-badge" title="Verified Member">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M9 16.17l-4.17-4.17 1.42-1.41 2.75 2.75 5.59-5.59 1.41 1.42-7 7zm11-3.17h-3.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3.5c.28 0 .5.22.5.5s-.22.5-.5.5zm0-4h-3.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3.5c.28 0 .5.22.5.5s-.22.5-.5.5zm0-4h-3.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3.5c.28 0 .5.22.5.5s-.22.5-.5.5z"/></svg>
    </span>
    <span class="badge bottom-badge" title="One Year Member">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M11.99 2c-5.52 0-9.99 4.48-9.99 10s4.47 10 9.99 10c5.53 0 10.01-4.48 10.01-10s-4.48-10-10.01-10zm.01 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13h-1v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
    </span>
    <span class="badge left-badge" title="Premium Member">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
    </span>
    <div class="avatar-image">
      <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80" alt="Profile photo">
    </div>
    <div class="username">Emma Wilson</div>
    <div class="level">Level 42</div>
  </div>
</div>

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

.achievement-avatar {
  --avatar-size: 90px;
  --badge-size: 32px;
  --primary-color: #8B5CF6;
  --secondary-color: #F59E0B;
  
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--avatar-size) + var(--badge-size));
}

.avatar-image {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--primary-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.achievement-avatar:hover .avatar-image {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.avatar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge {
  position: absolute;
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: 50%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border: 2px solid;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 2;
}

.badge:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.top-badge {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-color: gold;
  color: gold;
  animation: pulse 2s infinite;
}

.right-badge {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-color: #10B981;
  color: #10B981;
}

.bottom-badge {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-color: #3B82F6;
  color: #3B82F6;
}

.left-badge {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-color: #8B5CF6;
  color: #8B5CF6;
}

.username {
  margin-top: calc(var(--badge-size) / 2 + 5px);
  font-family: sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #1F2937;
}

.level {
  margin-top: 2px;
  font-family: sans-serif;
  font-size: 14px;
  color: var(--primary-color);
  font-weight: 500;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  }
}
</style>

Thank you for reading this article.

Creating an Avatar with Achievement Badges

HTML

CSS

Whole code

Comments

More avatars

Similar

See also