Build an overlapping row of avatars for teams, reviewers or community members. Adjust count, overlap, size and style, then copy clean HTML and CSS.
Avatar stacks are the fastest way to signal "these people are here" on a dashboard, doc or product page.
Each avatar overlaps the previous one with proper z-index stacking, just like real product UIs.
Auto-generated colored initials, or swap to any emoji set you like.
Show how many additional members aren't pictured, with a number you control.
An avatar stack is a compact way to represent a group of people without listing every name. You'll see it on collaborative docs showing active editors, on team pages showing contributors, and on social products showing "who's here." The visual trick is simple but easy to get wrong by hand: each avatar needs a negative margin to overlap the one before it, a border matching the page background so the overlap reads cleanly, and a rising z-index so later avatars sit visually on top rather than underneath. This generator handles all three automatically as you adjust the sliders, and produces a small, semantic block of HTML with inline CSS custom properties so the stack is easy to theme and drop into any layout.
Overlap is a negative left margin; stacking order is controlled with z-index so each avatar after the first appears above the one before it.
A solid border in the page's background color is what makes overlapping circles read as distinct avatars instead of a blurry blob.
Colored initial avatars are a reliable fallback when you don't have (or don't want to load) real profile photos.
A trailing "+N" bubble is a familiar UI pattern for signaling more members exist beyond what's visually shown.
Each avatar after the first uses a negative left margin equal to the overlap value, pulling it under the previous avatar while a rising z-index keeps later avatars on top.
Yes. Switch the fill style to emoji and edit the comma-separated list to use any emoji or initials you like.
It represents additional members not shown in the stack, such as +12 more team members. You can toggle it on or off and edit the number.
Yes. The output is plain HTML and CSS with no JavaScript or external libraries required, so it drops into any project.
Keep building small UI components with these free tools.