webdevpuneet.com

Related Snippets

67 in Tools & Calculators category
48–53 of 60

Avatar Generator

Box Shadow Generator

Color Mixer

Bezier Curve Editor

Color Contrast Checker

Unit Converter

Avatar Generator — Initials Avatars with Deterministic Color

Avatar Generator · Tools · Plain HTML, CSS & JS · Live preview

CategoryTools & Calculators
TagsSocial UICSS Grid

Copy & paste

Source Code

<div class="ag-card">
  <div class="ag-preview" id="agPreview"></div>
  <label class="ag-field">Name or email
    <input type="text" id="agName" value="Ada Lovelace" autocomplete="off" spellcheck="false">
  </label>
  <div class="ag-row">
    <label class="ag-opt"><input type="radio" name="agShape" value="circle" checked> Circle</label>
    <label class="ag-opt"><input type="radio" name="agShape" value="rounded"> Rounded</label>
    <button type="button" class="ag-shuffle" id="agShuffle">Shuffle palette</button>
  </div>
  <div class="ag-grid" id="agGrid"></div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Smart initials
Handles names, emails, single words, and separators.
Deterministic color
A stable hash maps each name to a fixed palette color.
Shape options
Circle or rounded-square avatars.
Swappable palettes
Shuffle curated palettes; recolors consistently.
Pure CSS render
Flex box + text — crisp at any size, no canvas.
Graceful fallbacks
Odd input degrades to a sensible one or two letters.
Reusable helpers
Pure hash, initials, and color functions.
No library
Pure HTML/CSS/JS — no avatar dependency.

About this UI Snippet

Avatar Generator — Initials and Deterministic Color from a Name

Screenshot of the Avatar Generator snippet rendered live

An avatar generator turns a name or email into a coloured initials avatar — the fallback every app shows when a user hasn't uploaded a photo. The two things that make it good are correct initials and a colour that's deterministic (the same person always gets the same colour). This snippet builds both, with shape and palette options, in plain HTML, CSS, and vanilla JavaScript with no images or canvas.

Initials that handle real input

Names come in messy: "Ada Lovelace", "[email protected]", "Zoë", a single word, a handle like "team-ops". The initials() function splits on spaces, @, dots, underscores, and hyphens, drops empties, and takes the first letter of the first and last parts (or the first two letters of a single word). So emails become "JA", multi-word names become first+last, and edge cases degrade gracefully to a sensible one or two letters rather than breaking.

Deterministic color from a hash

The colour isn't random — it's chosen by hashing the name to a number and indexing into a palette (hash(name) % palette.length). A simple, stable string hash means the same name always maps to the same colour across reloads, sessions, and devices, so a user's avatar is recognisable everywhere. The sample grid demonstrates this: every name keeps its colour, and different names spread across the palette.

Shape and palette options

A toggle switches between circle and rounded-square avatars, and a shuffle button cycles curated palettes — so you can match the generator to your brand. Because the colour is derived from the palette by hash, changing palettes instantly recolours every avatar consistently.

Pure CSS rendering, no canvas

Each avatar is just a flex box with a background colour and centred text, so it's crisp at any size, theme-able with CSS, and trivially exportable (no canvas-to-image step). That makes it cheap to render hundreds of them in a list.

Portable and dependency-free

The hash, initials, and colour functions are pure and reusable — drop them into a user list, a comment thread, or a presence indicator. It's a clean reference for the initials-avatar pattern that libraries like boring-avatars or Gravatar fallbacks implement, with no dependency and full control.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSAn avatar generator renders with a name field and a sample grid.
  2. 2
    Type a name or emailThe initials and color update as you type.
  3. 3
    Pick a shapeToggle between circle and rounded-square avatars.
  4. 4
    Shuffle the paletteCycle curated palettes to match your brand.
  5. 5
    Note determinismThe same name always gets the same color.
  6. 6
    Reuse the functionsLift initials() and colorFor() into your user list.

Real-world uses

Common Use Cases

User list fallbacks
Show coloured initials when no photo exists, grouped neatly using an avatar group component in a user list.
Comment and chat authors
Colour-code authors in a comment thread, with a stable hash giving each person the same colour every time.
Team member grids
Keep avatars consistent across a team card layout, with correct initials from names, emails and single words.
Presence and mentions
Provide recognisable avatars in a team presence list for mentions, with circle or rounded-square shapes to match your design.
Seed data and demos
Generate avatars for demos without uploading any images, and swap curated palettes while colours stay consistent per name.
Related: Buy Now Pay Later Selector
See the Buy Now Pay Later Selector for a related forms pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The name is split on spaces, @, dots, underscores, and hyphens, and empty pieces are dropped. With two or more parts it takes the first letter of the first and last parts (so "Ada Lovelace" becomes AL and "[email protected]" becomes JA). With a single word it takes the first two letters. Anything empty falls back to a question mark, so messy real-world input never breaks the avatar.

So a given person always has the same avatar color everywhere — in a list, a comment, a header — which makes them recognizable. The color is picked by hashing the name to a number and indexing into a palette, and because the hash is stable, the same string always yields the same color across reloads and devices. Random colors would change on every render and lose that identity.

Yes. Replace the PALETTES arrays with your brand colors; the generator indexes into the active palette by the name hash, so your colors are distributed deterministically across users. The shuffle button cycles palettes for previewing, but in production you would usually fix one palette that matches your design system.

A CSS avatar is just a colored box with centered text, so it is crisp at any size, themeable, accessible (real text), and cheap to render in bulk — a list of hundreds costs almost nothing. Canvas or generated images add a rasterization step, fixed resolution, and export complexity. For initials avatars, CSS is simpler and better in every way that matters here.

Keep hash, initials, and colorFor as pure functions and call them in a small Avatar component that takes a name prop and renders a styled box with the computed color and initials. Because the functions are deterministic, the same name always renders identically, which also makes them safe for server rendering. Tailwind users apply the shape and sizing with utilities and set the background via an inline style.