Avatar Generator
Design avatars with circle, rounded or square shapes, a ring, initials and a positionable status dot. Copy the CSS.
.avatar {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 72px; height: 72px;
border-radius: 50%;
background: #6d5efc; color: #ffffff;
font-weight: 700; font-size: 29px;
box-shadow: 0 0 0 3px #0f1117;
}
.avatar::after {
content: ""; position: absolute; bottom: 0; right: 0;
width: 16px; height: 16px; border-radius: 50%;
background: #22c55e; border: 2px solid #0f1117;
}What the avatar generator does
Avatars need a fallback, because a picture is often missing. Initials on a coloured background are the standard answer, and they scale with the avatar size so the ratio always looks right.
The ring is drawn with box-shadow rather than a border, which keeps the avatar's size fixed regardless of ring thickness, so rows of avatars stay aligned.
Using the tool
- 1Set initials and size. Font size scales automatically.
- 2Pick a shape: circle, rounded or square.
- 3Set the ring width and colour, usually matching the page background for the overlapping-stack look.
- 4Add a status dot and choose its corner.
- 5Copy the CSS.
Common questions
How do I build an overlapping avatar stack?
Give each avatar a negative left margin and a ring in the page background colour. The ring creates the gap that makes the stack read clearly.
Why use box-shadow for the ring?
A border would change the element's total size, pushing the layout around. box-shadow paints outside the box and leaves layout untouched.
What should the fallback be when there is no photo?
Initials on a background colour derived from the user's name, so the same person always gets the same colour. It is far better than a generic silhouette.