Gradient Avatar Generator
Default avatars from a name, email or user ID. The same text always gets the same gradient — download one, or copy the function and make them in your app.
Same name, same gradient
The text is hashed into a number, and that number picks the hues, the angle and where the colour sits. Nothing is random: Ada Lovelace gets the same avatar here, in your app and on every device. Capitals and spaces at either end are ignored, so Ada@Example.com and ada@example.com match.
Use it in your app
Copy the JavaScript function and call gradientAvatar(user.name). It returns an SVG string you can put in an <img> as a data URL, plus a CSS background, the initials and the colours. It has no dependencies, runs in the browser or Node, and makes exactly the avatars you see here.
Even colours
Colours are picked in OKLCH, so every hue comes out equally light and strong — no avatar is much louder than the next. Pastel suits light interfaces, Deep dark ones; the initials switch between white and near-black for contrast.
