Back

Professional User Avatar with Status Indicator

A comprehensive guide to creating a polished user avatar with an online/offline status indicator using pure CSS.

HTML

The HTML structure is minimal and clean. We need a parent div element with the class "avatar" that contains a child div element with the class "status".

        <div class="avatar">
            <div class="status"></div>
        </div>

CSS

Let's first style the avatar container using the "avatar" class. We'll create a square element with dimensions of 50x50 pixels and transform it into a perfect circle by setting the border-radius property to 50%. For the profile picture, we'll use a background image from a placeholder service and set background-size to cover to ensure the image fills the container properly. The position is set to relative, which establishes a positioning context for the status indicator.

        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-image: url('https://i.pravatar.cc/200?img=48');
            background-size: cover;
            position: relative;
        }

Now let's style the status indicator using the "status" class. We'll create a small 12x12 pixel circle with a bright green background color (#4cd137) indicating the online status. To make the indicator visually distinct, we'll add a 2-pixel white border around it. Using absolute positioning, we'll place the status indicator in the bottom-right corner of the avatar by setting both bottom and right properties to 0. We'll also add a short 0.1-second transition for a smooth animation when the status changes.

        .status {
            width: 12px;
            height: 12px;
            background-color: #4cd137;
            border-radius: 50%;
            border: 2px solid white;
            position: absolute;
            bottom: 0;
            right: 0;
            transition: 0.1s;
        }

Finally, we'll create a style for the offline state by using a class selector combination of "status.offline". When the user is offline, we'll simply change the background color to a red shade (#c23616).

        .status.offline {
            background-color: #c23616;
        }

And that completes our professional user avatar with status indicator! To toggle between online and offline states, simply add or remove the "offline" class from the status div.

Whole code

<div class="avatar">
  <div class="status"></div>
</div>

<style>
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: url('https://i.pravatar.cc/200?img=48');
  background-size: cover;
  position: relative;
}
.status {
  width: 12px;
  height: 12px;
  background-color: #4cd137;
  border-radius: 50%;
  border: 2px solid white;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: 0.1s;
}
.status.offline {
  background-color: #c23616;
}
</style>

Professional User Avatar with Status Indicator

HTML

CSS

Whole code

Comments

More avatars

Similar

See also