Text to Gradient

Turn any text into a unique mesh gradient: the same text always gives the same gradient. Export as CSS or PNG. Free, no sign-up.

How To Use

$ npm install text-to-gradient

import { textToGradient } from "text-to-gradient";

const css = textToGradient("hello");

npm GitHub Docs

How It Works

Type any text

Enter a name, email, title, UUID, or any string. The gradient updates instantly.

Deterministic output

The same text always produces the same gradient. Different text produces different gradients. Great for consistent visual identity.

Export

Copy the CSS code for your project, or download as a PNG at your chosen resolution.

FAQ

The text is hashed into a 32-bit integer. That hash deterministically selects a color palette, theme filter, gradient positions, sizes, and opacities.

Theoretically possible (hash collision), but extremely unlikely for normal inputs. Even small changes like 'hello' vs 'Hello' produce completely different gradients.

Yes. Since the same input always produces the same output, it's perfect for generating consistent avatar backgrounds from usernames or emails. Need to fine-tune the exact colors? Use the color converter to explore palettes.

Built & Maintained by Varstatt

Varstatt is a one-person product studio run by Jurij Tokarski, product engineer since 2011. These tools are free and open — no signup, no catch.