Generate deterministic mesh gradients from any string. Same text = same gradient. Zero dependencies.
Demo: varstatt.com/toolkit/text-gradient
npm install text-to-gradient
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 } for inline styles
g.layers; // raw layer data for custom rendering
// Same text, different look
fromText("john@example.com", { base: "#0a0a0a" }); // dark background
fromText("john@example.com", { layers: 4 }); // fewer blobs
fromText("john@example.com", { shape: "circle" }); // circles only
fromText("john@example.com", { opacity: [0.3, 0.6] }); // softer
fromText("john@example.com", { size: [60, 90] }); // bigger blobs
fromText("john@example.com", { angle: 45 }); // base gradient angle
fromText("john@example.com", { palette: 2 }); // force a palette
Same text + same options = always the same gradient. Different options = different result from the same text.
import { fromPoints } from "text-to-gradient";
fromPoints([
{ color: [255, 0, 0], position: "50% 50%" },
{ color: [0, 0, 255], position: "0% 100%", shape: "circle", opacity: 0.5, size: 70 },
], { base: "#111", angle: 90 });
import { textHash, rgbToHex, hexToRgb } from "text-to-gradient";
textHash("hello"); // deterministic 32-bit integer
rgbToHex([255, 20, 147]); // "#ff1493"
hexToRgb("#ff1493"); // [255, 20, 147]
fromText(text, options?) → GradientResult| Option | Type | Default | Description |
|---|---|---|---|
base |
string |
derived | Background color (hex) |
layers |
number |
6-10 | Number of radial layers (1-15) |
shape |
"circle" \| "ellipse" |
mixed | Shape for radial layers |
opacity |
[min, max] |
[0.7, 1.0] |
Opacity range |
size |
[min, max] |
[45, 80] |
Size range (%) |
angle |
number |
135 |
Base gradient angle (deg) |
palette |
number |
derived | Force palette index (0-5) |
fromPoints(points, options?) → GradientResultFull manual control. Each point: { color, position, shape?, opacity?, size? }.
GradientResult{
css: string; // background-color + background-image
style: { // for React/inline styles
backgroundColor: string;
backgroundImage: string;
};
backgroundColor: string;
layers: GradientLayer[];
}
Built and maintained by Jurij Tokarski from Varstatt. MIT licensed.