Stack Avatars
A copy-paste avatars component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
AvatarsHTMLCSSany framework
A
B
C
D
Copy into your project
HTML
<div class="nuda-stack-avatars">
<img class="nuda-stack-avatars__item" src="avatar1.jpg" alt="User 1" />
<img class="nuda-stack-avatars__item" src="avatar2.jpg" alt="User 2" />
<img class="nuda-stack-avatars__item" src="avatar3.jpg" alt="User 3" />
<img class="nuda-stack-avatars__item" src="avatar4.jpg" alt="User 4" />
</div>CSS
/* Stack Avatars
Overlapping avatars that expand on hover.
Customize: --stack-size */
.nuda-stack-avatars {
display: flex;
}
.nuda-stack-avatars__item {
--stack-size: 40px;
width: var(--stack-size);
height: var(--stack-size);
border-radius: 50%;
border: 2.5px solid #111;
margin-left: -10px;
transition:
transform 0.25s cubic-bezier(0.4, 0.2, 0.2, 1.3),
margin 0.25s ease;
position: relative;
z-index: 1;
overflow: hidden;
object-fit: cover;
will-change: transform;
}
.nuda-stack-avatars__item:first-child {
margin-left: 0;
}
.nuda-stack-avatars:hover .nuda-stack-avatars__item {
margin-left: 4px;
}
.nuda-stack-avatars:hover .nuda-stack-avatars__item:first-child {
margin-left: 0;
}
.nuda-stack-avatars__item:hover {
transform: scale(1.15);
z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
.nuda-stack-avatars__item { transition: none; }
}How to use Stack Avatars
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.