Initials Avatar
A copy-paste avatars component in pure HTML, CSS & vanilla JS. Zero dependencies, framework-agnostic, MIT-licensed.
AvatarsHTMLCSSJavaScriptany framework
JD
AS
BW
Copy into your project
HTML
<!-- Set data-hue to generate unique gradient per user -->
<div class="nuda-initials-avatar" data-hue="250" aria-label="John Doe">JD</div>
<div class="nuda-initials-avatar" data-hue="340" aria-label="Alice Smith">AS</div>
<div class="nuda-initials-avatar" data-hue="160" aria-label="Bob Wilson">BW</div>CSS
/* Initials Avatar
Letter avatar with gradient background.
Set --hue via data attribute or inline style.
Customize: --avatar-size */
.nuda-initials-avatar {
--avatar-size: 44px;
--hue: 250;
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 50%;
background: linear-gradient(
135deg,
hsl(var(--hue) 70% 55%),
hsl(calc(var(--hue) + 40) 70% 45%)
);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
user-select: none;
}JavaScript
/* Initials Avatar — vanilla JS
Auto-generates hue from data-hue attribute. */
(function () {
document.querySelectorAll(".nuda-initials-avatar").forEach(function (el) {
var hue = el.getAttribute("data-hue");
if (hue) {
el.style.setProperty("--hue", hue);
}
});
})();How to use Initials Avatar
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.