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.
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 });