Text to Gradient

Generate unique mesh gradients from any text. Same text always produces the same gradient. Great for avatars, covers, and backgrounds.

Use it in your project

The gradient engine behind this tool is available as a standalone NPM package. Zero dependencies, deterministic output, works in Node.js and the browser.

npm versionlicense
Install
$ npm install text-to-gradient
Usage
import { fromText } from "text-to-gradient";

// Default — text drives everything
const g = fromText("john@example.com");
g.css;      // ready-to-use CSS string
g.style;    // { backgroundColor, backgroundImage }
g.layers;   // raw layer data for custom rendering

// Override specific properties
fromText("john@example.com", { base: "#0a0a0a" });
fromText("john@example.com", { layers: 4 });
fromText("john@example.com", { shape: "circle" });
fromText("john@example.com", { opacity: [0.3, 0.6] });
fromText("john@example.com", { size: [60, 90] });
fromText("john@example.com", { angle: 45 });
fromText("john@example.com", { palette: 2 });

How It Works

1

Type any text

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

2

Deterministic output

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

3

Export

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

FAQ

Related Tools

Designing a product?

Map out your user personas and feature set before you build — run a Discovery session.

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.