text-to-gradient

Generate deterministic mesh gradients from any string. Same text = same gradient. Zero dependencies.

Demo: varstatt.com/toolkit/text-gradient

Install

npm install text-to-gradient

Usage

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

// Default — text drives everything
const g = fromText("[email protected]");
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("[email protected]", { base: "#0a0a0a" });       // dark background
fromText("[email protected]", { layers: 4 });              // fewer blobs
fromText("[email protected]", { shape: "circle" });        // circles only
fromText("[email protected]", { opacity: [0.3, 0.6] });   // softer
fromText("[email protected]", { size: [60, 90] });         // bigger blobs
fromText("[email protected]", { angle: 45 });              // base gradient angle
fromText("[email protected]", { palette: 2 });             // force a palette

Same text + same options = always the same gradient. Different options = different result from the same text.

Manual control

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

Helpers

import { textHash, rgbToHex, hexToRgb } from "text-to-gradient";

textHash("hello");          // deterministic 32-bit integer
rgbToHex([255, 20, 147]);   // "#ff1493"
hexToRgb("#ff1493");        // [255, 20, 147]

API

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?) → GradientResult

Full 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[];
}

About

Built and maintained by Jurij Tokarski from Varstatt. MIT licensed.

• Docs
• Examples
• GitHub
• npm
• Issues