gradiente

Minimalist & lightweight engine for sophisticated web gradients

Gradiente

Gradiente is a lightweight gradient parser and transformer for modern rendering systems.

Parse CSS gradients → work with structured data → render anywhere.

Gradients as data, not strings.

Install

npm install gradiente

Example

import { parse, transformTo } from "gradiente";

const gradient = parse("linear-gradient(red, blue)");

const css = transformTo("css", gradient);
const canvas = transformTo("canvas", gradient);

canvas.draw(ctx, 300, 300);

The full documentation is published on gradiente docs. Some quick entry points:

What it does

Parses gradients into structured objects
Normalizes angles, positions, and stops
Transforms gradients to different targets:
- CSS
- Canvas
- (more coming)

Built for

design tools
visual editors
canvas engines
WebGL / Pixi / Konva
custom rendering pipelines

Philosophy

Gradiente treats gradients as a graphics primitive.

Not a string to preserve - but data you can transform and render anywhere.

Contributing

Contributions of all kinds (feedback, ideas, bug fixes, documentation) are welcome.

Please open a GitHub issue/discussion before putting in any work that’s not straightforward.