Stacked avatars with transparent overlap

Learn to create stacked avatars with a transparent overlap effect using TailwindCSS, custom utilities, and an SVG mask. Perfect for displaying team members or user collections!

The stacked avatars with transparent overlap technique combines TailwindCSS utilities, CSS masking, and an SVG shape. It’s a sleek way to display avatars with visually distinct overlaps, perfect for teams or social features. Follow this guide to build the effect from scratch:

Here’s a step by step guide to create stacked avatars with transparent overlap:

Create the Mask shape

The mask determines the unique clipped shape of the avatars. Save the following as avatar-mask.svg in your project:

<svg viewBox="0 0 86 100" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M50 0C63.8501 0 76.3848 5.63135 85.4395 14.729C77.0806 24.0981 72 36.4561 72 50C72 63.5439 77.0806 75.9019 85.4395 85.271C76.3848 94.3687 63.8501 100 50 100C22.3857 100 0 77.6143 0 50C0 22.3857 22.3857 0 50 0Z" fill="#D9D9D9" style="fill:#D9D9D9;fill:color(display-p3 0.8510 0.8510 0.8510);fill-opacity:1;"/>
</svg>

Create Custom Utilities for the Mask

Add the following CSS to your Tailwind configuration to create reusable utility classes for applying the mask:

@layer avatar-mask {
    -webkit-mask-image: url('/avatar-mask.svg');
    mask-image: url('/avatar-mask.svg');
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
@layer avatar-mask-none {
    -webkit-mask-image: none;
    mask-image: none;
}

This utility applies the SVG mask to any element and removes it when .avatar-mask-none is used.

Use the Utilities in Your HTML

Finally, create the stacked avatar layout in your HTML. Here’s how:

<div class="relative flex -space-x-1 *:size-9 *:rounded-full *:avatar-mask *:last:avatar-mask-none *:object-cover">
    <img src="https://avatars.githubusercontent.com/u/47919550?v=4" alt="" />
    <img src="https://avatars.githubusercontent.com/u/55670723?v=4" alt="" />
    <img src="https://avatars.githubusercontent.com/u/31113941?v=4" alt="" />
    <img src="https://avatars.githubusercontent.com/u/99137927?v=4" alt="" />
    <img src="https://avatars.githubusercontent.com/u/68236786?v=4" alt="" />
</div>

This technique uses flex and -space-x-1 for stacking avatars with overlap, *:size-9 for consistent sizing, and custom masking for unique shapes. The *:object-cover utility ensures images fit neatly within the clipped shape. The last avatar in the stack uses .avatar-mask-none to retain full visibility. You can customize the mask shape, size, or spacing to suit your design needs!

Example with smaller avatars

<div class="relative flex -space-x-0.5 *:size-6 *:rounded-full *:avatar-mask *:last:avatar-mask-none *:object-cover">
    <img src="https://avatars.githubusercontent.com/u/47919550?v=4" alt="" />
    <img src="https://avatars.githubusercontent.com/u/55670723?v=4" alt="" />
    <img src="https://avatars.githubusercontent.com/u/31113941?v=4" alt="" />
    <img src="https://avatars.githubusercontent.com/u/99137927?v=4" alt="" />
    <img src="https://avatars.githubusercontent.com/u/68236786?v=4" alt="" />
</div>

On this page