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 gradientSVG · PNG · JavaScript
JavaScript — make them in your app
SVG
CSS

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.