Back

Creating a Customizable Gradient Avatar with Initials

Learn how to build a modern, responsive avatar with gradient background and centered text using CSS variables for easy customization.

HTML

The HTML structure for our gradient initial avatar is extremely simple. We have an outer container with the class "avatar-container" for positioning, and an inner div with the class "avatar" that will display our gradient background. Inside that, we have a span with the class "initials" to display the user's initials.

        <div class="avatar-container">
          <div class="avatar">
            <span class="initials">JD</span>
          </div>
        </div>

CSS

First, let's set up the container for our avatar. This will center the avatar both horizontally and vertically within its parent container using flexbox.

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

Next comes the main styling for our avatar. We start by defining several CSS variables at the top of the rule set. This makes our avatar highly customizable; you can easily change the size, colors, and proportions by adjusting these variables. We define variables for the avatar size, font size (calculated as a proportion of the avatar size), and the gradient colors.

        .avatar {
            --avatar-size: 80px;
            --avatar-font-size: calc(var(--avatar-size) * 0.4);
            --avatar-bg-from: #8B5CF6;
            --avatar-bg-to: #EC4899;
            
            width: var(--avatar-size);
            height: var(--avatar-size);
            border-radius: 50%;
            background: linear-gradient(135deg, var(--avatar-bg-from), var(--avatar-bg-to));
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

The key properties here are: - The circular shape is created using border-radius: 50%. - The vivid background uses a linear gradient from purple to pink at a 135-degree angle. - We use flexbox again to center the initials within the circular avatar. - A subtle box-shadow adds depth and makes the avatar appear slightly elevated. Finally, we style the initials text to ensure it's readable and visually balanced within the avatar:

        .initials {
            color: white;
            font-family: sans-serif;
            font-size: var(--avatar-font-size);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            user-select: none;
        }

We use white text for maximum contrast against the colorful background. The font is set to be bold (font-weight: 600) and uppercase to create a consistent, clean appearance regardless of what initials are used. We also add a slight letter-spacing to improve readability. The user-select: none property prevents the initials from being selected when clicked, which is a small detail that improves usability. This gradient initial avatar offers several advantages: - Highly customizable: By changing the CSS variables, you can easily adjust the size, colors, and proportions. - Fallback solution: When user profile pictures aren't available, this provides an attractive, personalized alternative. - Scalable: The avatar scales well across different device sizes thanks to the proportional sizing. - Lightweight: No images are required, making it fast to load and render. - Accessible: The high contrast between text and background ensures readability. - Brand consistency: You can use your brand colors in the gradient to maintain visual identity. This approach to avatars works particularly well in user interfaces where not all users have uploaded profile pictures, or in applications where you want to maintain a consistent, colorful aesthetic.

Whole code

<div class="avatar-container">
  <div class="avatar">
    <span class="initials">JD</span>
  </div>
</div>

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

.avatar {
  --avatar-size: 80px;
  --avatar-font-size: calc(var(--avatar-size) * 0.4);
  --avatar-bg-from: #8B5CF6;
  --avatar-bg-to: #EC4899;
  
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--avatar-bg-from), var(--avatar-bg-to));
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.initials {
  color: white;
  font-family: sans-serif;
  font-size: var(--avatar-font-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
}
</style>

Creating a Customizable Gradient Avatar with Initials

HTML

CSS

Whole code

Comments

More avatars

Similar

See also