User avatars carry more weight than a logo in many UI moments. They anchor comments, drive recognition in chat, and keep team views readable. This guide shows you how to build a flexible avatar system that uses shapes to crop images and initials: circles, rounded squares, diamonds, and hexagons. You will finish with reusable CSS utilities, clean HTML, and a few extra touches that make avatars feel polished across light and dark themes.
Why Shapes for Avatars Matter
Shape is a fast branding cue. A circle feels friendly and familiar. A rounded square reads as structured. A hexagon or diamond can match a product theme. Using CSS for these masks means the same image can adapt to multiple contexts without re-editing assets. That keeps design consistent, reduces image variants, and simplifies component theming.
CSS shapes also improve layout quality. A consistent mask, fixed aspect ratio, and object-fit cropping remove layout shifts and prevent text or badges from jumping around. You get predictable touch targets and reliable focus outlines. You also get fallbacks: when an image is missing, initials render inside the same shape without extra markup.
Prerequisites
You do not need a framework for this. We will write plain HTML and CSS with a few modern features for clean cropping and shape masks.
- Basic HTML
- CSS custom properties
- CSS pseudo-elements (::before / ::after)
Step 1: The HTML Structure
The avatar component is a single block element that can contain an img. When an img is missing, the component prints initials from a data attribute. Shape is applied with modifier classes. Here is the exact markup we will style:
<!-- HTML -->
<div class="avatars">
<div class="avatar avatar--circle" data-initials="AL">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=256&auto=format&q=80" alt="Alicia Lopez" loading="lazy" decoding="async">
</div>
<div class="avatar avatar--rounded" data-initials="BW">
<img src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?w=256&auto=format&q=80" alt="Brian Wu" loading="lazy" decoding="async">
</div>
<div class="avatar avatar--hex" data-initials="CR">
<img src="https://images.unsplash.com/photo-1542206395-9feb3edaa68c?w=256&auto=format&q=80" alt="Cris Ramirez" loading="lazy" decoding="async">
</div>
<div class="avatar avatar--diamond" data-initials="DJ"><!-- Intentionally no img to show initials fallback --></div>
</div>
The parent .avatars is just a layout helper for the demo. Each .avatar holds image content and prints initials via CSS. Shape is not tied to the img; it lives on the wrapper, which keeps the same interaction and spacing rules regardless of content.
Step 2: The Basic CSS & Styling
We will define a small set of custom properties for size, radius, and colors. The base .avatar provides size constraints, object-fit cropping, and the initials fallback with a ::before pseudo-element. From there, shape modifiers adjust only the mask.
/* CSS */
:root {
--avatar-size: 72px;
--avatar-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
--avatar-radius: 14px;
--avatar-bg: oklch(0.75 0.08 260);
--avatar-fg: oklch(0.2 0.03 260);
--avatar-ring-color: oklch(0.98 0 0 / 0.9);
--avatar-ring-size: 2px;
}
*,
*::before,
*::after { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--avatar-font);
background: oklch(0.98 0 0);
color: oklch(0.25 0.03 260);
line-height: 1.4;
padding: 24px;
}
.avatars {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 24px;
align-items: start;
max-width: 900px;
margin-inline: auto;
}
.avatar {
--size: var(--avatar-size);
inline-size: var(--size);
aspect-ratio: 1;
position: relative;
display: grid; /* Center fallback initials */
place-items: center;
overflow: hidden;
background: linear-gradient(135deg, var(--avatar-bg), oklch(0.88 0.05 220));
color: var(--avatar-fg);
border-radius: 0; /* Shape modifiers will change this */
box-shadow:
0 0 0 var(--avatar-ring-size) var(--avatar-ring-color) inset,
0 1px 2px rgb(0 0 0 / 0.06),
0 8px 24px -8px rgb(0 0 0 / 0.15);
}
.avatar img {
width: 100%;
height: 100%;
display: block;
object-fit: cover; /* Crops inside the shape */
}
/* Initials fallback printed via pseudo-element */
.avatar::before {
content: attr(data-initials);
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-weight: 700;
font-size: calc(var(--size) * 0.36);
letter-spacing: 0.04em;
z-index: 0;
color: var(--avatar-fg);
}
/* Hide initials when an <img> is present */
.avatar:has(img)::before {
content: "";
}
/* Rounded square variant */
.avatar--rounded {
border-radius: var(--avatar-radius);
}
Advanced Tip: Keep shape, size, and ring values as custom properties. Product teams often need multiple avatar scales. With this setup you can set –size per component, per list, or even per element style attribute without touching the rest of the CSS.
Step 3: Building the Circular Avatar
The circle is the most common avatar shape. We will add a class that masks the wrapper with a perfect circle. For broad support, border-radius is enough. If you need a hard vector edge, you can layer clip-path as well.
/* CSS */
.avatar--circle {
border-radius: 50%;
/* Optional: uncomment clip-path for a vector circle edge
clip-path: circle(50% at 50% 50%);
*/
}
/* Tweak the ring to match the circle better on dark UIs if needed */
.avatar--circle {
box-shadow:
0 0 0 var(--avatar-ring-size) color-mix(in oklch, var(--avatar-ring-color), black 5%) inset,
0 1px 2px rgb(0 0 0 / 0.06),
0 8px 24px -8px rgb(0 0 0 / 0.15);
}
How This Works (Code Breakdown)
border-radius: 50% converts any square into a circle. Because the component has aspect-ratio: 1, it stays perfectly round across sizes. object-fit: cover on the img crops the portrait so the face stays centered. The ring uses an inset box-shadow, which reads as a thin border without affecting layout. If your design prefers a crisp geometric edge, clip-path: circle works as well and leaves corners completely non-interactive.
If you want a refresher on different approaches to the circle shape, the guide on how to make a circle with CSS shows variations and tradeoffs. In this component, border-radius is the simplest and most compatible approach.
Step 4: Building Polygon Avatars (Diamond and Hexagon)
Some brands use angular masks that stand out in team lists or dashboards. We will add two polygon variants using clip-path. Both keep the same wrapper markup and the same image behavior.
/* CSS */
/* Diamond mask: no rotation needed, just a 4-point polygon */
.avatar--diamond {
clip-path: polygon(
50% 0%,
100% 50%,
50% 100%,
0% 50%
);
}
/* Hexagon mask: classic flat-top hexagon */
.avatar--hex {
clip-path: polygon(
25% 6.25%,
75% 6.25%,
100% 50%,
75% 93.75%,
25% 93.75%,
0% 50%
);
}
/* Optional: ring that follows the polygon by faking a border with a mask */
.avatar--diamond,
.avatar--hex {
/* Keep the inset ring subtle so corners feel clean */
box-shadow:
0 0 0 var(--avatar-ring-size) var(--avatar-ring-color) inset,
0 1px 2px rgb(0 0 0 / 0.06),
0 8px 24px -8px rgb(0 0 0 / 0.15);
}
How This Works (Code Breakdown)
clip-path creates a mask from a polygon with percentage points. For the diamond, four points form a perfect lozenge without rotating content, so the image reads upright. For the hexagon, six points yield a flat-top look that works well inside grid rows. Both masks are applied to the wrapper, so they constrain everything inside, including the img and the fallback initials.
Because clip-path clips pointer events outside the shape, click and focus land only inside the polygon. This is helpful when avatars are interactive. If you prefer a rounded square alternative that feels less rigid than a perfect square, the modifier we added earlier (.avatar–rounded) is all you need. The article on how to make a square with CSS covers square and rounded approaches with border-radius.
For a deeper look at polygons, you can compare this hexagon against methods that use transforms and pseudo-elements in the tutorial on how to make a hexagon with CSS. That guide explains tradeoffs between hard masks and box-based constructions, which helps when you style badges or counters that sit on top of avatars.
Advanced Techniques: Animations and Interactions
Small effects make avatars feel alive while staying respectful to motion settings. We will add focus-visible rings, a gentle hover scale, and a subtle online badge using a gradient dot that snaps to the bottom-right corner. These are purely cosmetic and do not change the mask.
/* CSS */
/* Focus ring that respects the mask */
.avatar:focus-visible {
outline: none;
box-shadow:
0 0 0 calc(var(--avatar-ring-size) + 2px) oklch(0.65 0.15 210) inset,
0 0 0 2px oklch(0.65 0.15 210),
0 8px 24px -8px rgb(0 0 0 / 0.15);
}
/* Hover scale with motion guard */
.avatar {
transition: transform 160ms ease, box-shadow 160ms ease;
}
.avatar:hover {
transform: translateY(-1px) scale(1.02);
box-shadow:
0 0 0 var(--avatar-ring-size) var(--avatar-ring-color) inset,
0 10px 28px -10px rgb(0 0 0 / 0.25);
}
@media (prefers-reduced-motion: reduce) {
.avatar {
transition: none;
}
.avatar:hover {
transform: none;
}
}
/* Optional presence badge using ::after, clipped inside the same shape */
.avatar::after {
content: "";
position: absolute;
inline-size: calc(var(--size) * 0.28);
block-size: calc(var(--size) * 0.28);
right: 2px;
bottom: 2px;
background: radial-gradient(closest-side, oklch(0.83 0.18 145), oklch(0.68 0.20 145));
border-radius: 50%;
box-shadow: 0 0 0 2px oklch(0.98 0 0);
transform: translate(10%, 10%);
z-index: 2;
}
/* A utility to disable the badge when not needed */
.avatar[data-badge="off"]::after { display: none; }
The focus-visible rule keeps keyboard navigation clear. The avatar still has a ring even with a complex mask. The badge sits inside the same clipping context, so it never spills outside edges. For multi-theme sites, you can override the outer box-shadow colors with CSS variables and keep the rest intact.
Accessibility & Performance
Good avatars are not only pretty masks. They need alt text, predictable focus treatment, and efficient loading behavior.
Accessibility
Use meaningful alt text if the avatar conveys identity, such as a person or an account. Example: alt=”Alicia Lopez”. If the avatar is purely decorative, use alt=”” so screen readers skip it. Keep the focus ring on the wrapper .avatar when it is clickable, not on the img. Use tabindex=”0″ or a button element for interactivity, then manage events on that element so the mask does not interfere with keyboard access.
Limit animation to small transitions and respect prefers-reduced-motion. The snippet above removes the transform on hover for users who prefer less motion. When you add badges with pseudo-elements, mark them as presentation only. Because ::before and ::after are not read by assistive tech, they have no extra semantics, which is what we want here.
Performance
clip-path and border-radius are fast for static masks on modern engines. The component does not animate clip-path, so it stays smooth. object-fit cropping avoids expensive canvas work and keeps memory use predictable. Images load with loading=”lazy” and decoding=”async” to reduce main thread blocks. Set a width with aspect-ratio so layouts do not shift while images load.
For lists with hundreds of avatars, set smaller –size values at the list container and prefer content-visibility: auto on rows if you virtualize. Keep shadows light; large, blurry shadows on dozens of elements cost more than clip-path. If you build a color-coded background behind initials, generate the color in CSS from initials or a stable ID to avoid layout thrash.
A Shape System You Can Reuse
You now have a shape-driven avatar system: base HTML with initials fallback, a circle for friendly profiles, a rounded square for structured lists, and polygon masks for brand flavor. The same CSS scales from 24px to 128px by changing one variable. Keep extending the set with shapes that fit your product, and you will have a consistent visual language for identity everywhere.