DEV Community


Posted on • Originally published at

Simple avatar with status indicator - CSS only - A step-by-step tutorial

Avatar with status indicator

Tutorial on how to create a simple avatar with status indicator using only CSS.


For HTML, we need only one div element with "avatar" class and a span element inside with "status" element. This element will indicate status.

Default value will be offline, by adding the "active" class to it, the status indicator will become green.

For now, we'll add an "active" class to it.

<div class="avatar">
    <span class="status active"></span>
Enter fullscreen mode Exit fullscreen mode


For CSS, first we'll style the avatar.

We'll set it's width and height to 40x40 px.

A little rounded border of 3px width, solid dark blue.

We'll set it's position to relative.

And, of course, the image. We'll set the background image to url image, and it's size to cover the whole 40x40 area, with position set to center.

.avatar {
    width: 40px;
    height: 40px;
    border: 3px rgb(48, 69, 96) solid;
    border-radius: 6px;
    position: relative;
    background-image: url('');
    background-size: cover;
    background-position: center;
Enter fullscreen mode Exit fullscreen mode

Our status indicator will be 6x6 pixels size with a dark border with radius set to 50%, which will form a circle.

We'll set it's position to absolute, and with top and right set to 0 with transform translate set to 40% and -40%, it will be positioned in the top right corner.

Lastly, we'll set it's background to dark grey. This is the look of offline status. The default one.

.status {
    width: 6px;
    height: 6px;
    border: 2px solid rgb(48, 69, 96);
    border-radius: 50%;
    position: absolute;
    right: 0px;
    top: 0px;
    transform: translate(40%, -40%);
    background-color: rgb(33, 34, 35);
Enter fullscreen mode Exit fullscreen mode

Now we'll style the "active" class.

This class we'll be appended to a status element.

We'll just override the background-color property, and set it to green.

.active {
    background-color: rgb(48, 249, 75);
Enter fullscreen mode Exit fullscreen mode

And that's it.

Simply remove the "active" class from the status element when offline and add it when online.

You can find video tutorial with full code here.

Thanks for reading. ❤️

Top comments (1)

maame-codes profile image
Maame Afia Fordjour

Saving this for later.