A row of overlapping circular avatars — commonly seen showing "who's in this meeting" or "who's viewed this document" — is a compact, visually efficient way to display multiple people without taking up much horizontal space.
Customize how many avatar circles to show and an additional "+N more" count for anyone beyond the visible avatars, see the overlapping stack render live, then copy the HTML and CSS needed to build the same component in your own project.
The overlap effect uses negative left margin on each avatar after the first, combined with a white border to create visual separation between overlapping circles, and z-index stacking to control which avatar appears on top.
Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.
Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.
This kind of task shows up constantly in everyday writing, coding, design, and admin work, which is exactly why a dedicated, focused tool saves so much back-and-forth.
A tool that does one job well, without a cluttered interface or unrelated features competing for attention, tends to be faster to use than a heavier all-in-one app.
Frequently asked questions
How is the overlap effect achieved?
Each avatar after the first uses a negative left margin to pull it partially behind the previous one, with a white border adding visual separation and z-index controlling the stacking order.
Can I use real profile photos instead of colored placeholder circles?
Yes, replace the placeholder background colors with background-image or an img element inside each avatar circle to show real profile photos instead.