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

Supported

linear-gradient(...)
repeating-linear-gradient(...)

radial-gradient(...)
repeating-radial-gradient(...)

conic-gradient(...)
repeating-conic-gradient(...)

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

Status

• linear gradients
• radial gradients
• conic gradients
• canvas + css transformers
• docs
• playground
• more render targets

Philosophy

Gradiente treats gradients as a graphics primitive.

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