v2.5.0

Update v2.5.0

This release expands gradiente with new advanced gradient types and renderer support across CSS, Canvas 2D, WebGL, and SVG.

Highlights

• Added SVG transformer target

Supported SVG outputs:

• linear-gradient as native <linearGradient>
• radial-gradient as native <radialGradient>
• conic-gradient as SVG pattern fallback
• diamond-gradient as SVG pattern fallback
• mesh-gradient as SVG pattern fallback

The SVG transformer returns reusable SVG defs data:

{
  id,
  href,
  url,
  type,
  gradient,
  defs,
  svg
}

This can be applied to SVG fill or stroke using url(#id).

Rendering Improvements

• Added proper Canvas 2D rendering for diamond gradients
• Added WebGL rendering for diamond gradients
• Added Canvas 2D and WebGL mesh rendering
• Added bicubic mesh interpolation
• Improved mesh edge handling to avoid broken borders
• Added SVG fallbacks for gradients without native SVG equivalents
• Improved playground comparison between CSS, Canvas 2D, WebGL, and SVG

Playground

The playground now includes SVG preview targets:

• SVG text
• SVG square
• SVG path/string stroke

This makes it easier to compare how each gradient behaves across renderers.

Notes

Some SVG outputs use fallback patterns because SVG does not provide native equivalents for conic, diamond, or mesh gradients. These fallbacks are designed to be reusable through standard SVG url(#id) references.

v2.4.0

v2.4.0 - Diamond & Mesh Gradients

gradiente v2.4.0 introduces two new custom gradient types: diamond-gradient() and experimental mesh-gradient().

This release expands gradiente beyond standard CSS-like gradients and adds new rendering capabilities for custom visual systems, including CSS fallback output, Canvas 2D rendering, and WebGL rendering.

Highlights

• Added diamond-gradient()
• Added repeating-diamond-gradient()
• Added experimental mesh-gradient()
• Added mesh vertices, patches, and handles
• Added CSS / Canvas 2D / WebGL rendering for mesh gradients
• Added CSS fallback rendering for custom gradient types
• Added stronger validation for complex gradient structures
• Improved playground/random generation support for mesh gradients

Diamond gradients

diamond-gradient() is a custom gradiente extension.

It reuses the radial-gradient configuration model, but renders using a diamond-shaped distance field instead of circular or elliptical radial distance.

diamond-gradient(circle at 65% 74%, hsl(295, 95%, 62%) 0%, hsl(55, 78%, 59%) 69%, hsl(139, 96%, 54%) 100%)

diamond-gradient(circle closest-corner at 75% 25% in oklch longer hue, red 0%, yellow 25%, lime 45%, cyan 65%, blue 85%, purple 100%)

Supported features include:

• circle and ellipse
• radial-like size keywords
• explicit sizes
• keyword and value positions
• interpolation
• repeating diamond gradients
• CSS fallback rendering
• Canvas/WebGL-compatible transformation pipeline

Mesh gradients

This release introduces experimental mesh-gradient() support.

Unlike linear, radial, conic, and diamond gradients, mesh gradients are not stop-based. They use an editor-oriented surface model based on:

• grid configuration
• vertices
• patches
• optional patch handles
• interpolation config
• CSS fallback rendering
• Canvas 2D rendering
• WebGL rendering

Example:

mesh-gradient(
  grid 3 3 method bicubic in oklab,
  vertex v00 0% 0% #ff5c8a,
  vertex v10 50% 0% #ffb703,
  vertex v20 100% 0% #6366f1,
  vertex v01 0% 50% #60a5fa,
  vertex v11 50% 50% #ffffff,
  vertex v21 100% 50% #ec4899,
  vertex v02 0% 100% #22c55e,
  vertex v12 50% 100% #06b6d4,
  vertex v22 100% 100% #2563eb,
  patch p00 v00 v10 v11 v01,
  patch p10 v10 v20 v21 v11,
  patch p01 v01 v11 v12 v02,
  patch p11 v11 v21 v22 v12
)

Mesh gradients are designed as a foundation for future editor-style gradient tools in the gradiente and Flowscape ecosystem.

Mesh gradient model

mesh-gradient() now supports a structured gradient model with:

• grid <rows> <columns>
• method bilinear
• method bicubic
• vertex <id> <x> <y> <color>
• patch <id> <topLeft> <topRight> <bottomRight> <bottomLeft>
• handle <patchId> <side> <fromX> <fromY> <toX> <toY>

Example with handles:

mesh-gradient(
  grid 2 2 method bicubic in oklab,
  vertex v00 0% 0% #ff4d6d,
  vertex v10 100% 0% #ffb703,
  vertex v01 0% 100% #06d6a0,
  vertex v11 100% 100% #3a86ff,
  patch p00 v00 v10 v11 v01,
  handle p00 top 20% 0% 80% 0%,
  handle p00 right 100% 20% 100% 80%
)

Added

• Added DiamondGradient
• Added MeshGradient
• Added diamond gradient parser/serializer support
• Added mesh gradient parser/serializer support
• Added mesh vertex and patch validation
• Added mesh handle parsing and serialization
• Added CSS transformer for diamond gradients
• Added CSS transformer for mesh gradients
• Added Canvas 2D transformer support for mesh gradients
• Added WebGL transformer support for mesh gradients
• Added more advanced random mesh generation for playground testing

Improved

• Improved custom gradient rendering pipeline
• Improved CSS fallback rendering for non-native gradient types
• Improved validation for custom gradient syntax
• Improved round-trip behavior for mesh gradients
• Improved playground testing coverage for complex gradient types

Known limitations

diamond-gradient() and mesh-gradient() are custom gradiente extensions, not native CSS features.

mesh-gradient() is experimental and may continue to evolve as gradiente moves toward more advanced curved patch rendering and editor-focused gradient tooling.

Rendering quality may vary depending on target, mesh complexity, and output format. CSS mesh rendering currently uses fallback output because native CSS does not support mesh gradients.

Summary

gradiente v2.4.0 adds two major custom gradient systems:

• diamond-gradient() - a radial-like gradient with diamond distance rendering
• mesh-gradient() - an experimental editor-oriented patch/vertex gradient model

This release is a major step toward making gradiente a broader gradient toolkit for custom rendering environments, visual editors, and the Flowscape ecosystem.

v2.3.0

v2.3.0 - Radial & Conic Gradients

Gradiente v2.3.0 expands the library into a more complete gradient engine with support for radial and conic gradients across parsing, serialization, interpolation, Canvas 2D, and WebGL rendering.

Highlights

• Added improved conic-gradient() support
• Added conic-gradient() WebGL rendering
• Improved conic-gradient() Canvas 2D interpolation
• Added interpolation support for radial and conic rendering
• Improved Canvas 2D and WebGL consistency

Known limitations

Some extreme repeating gradients with very small hard-stop intervals may still show minor differences between Canvas 2D and WebGL because of pixel sampling and edge interpolation.

Example:

repeating-conic-gradient(from 45deg, white 0%, white 4%, black 4%, black 8%)

Some degenerate repeating radial cases where the radius becomes extremely small may also differ between render targets and will be improved in a future rendering precision update.

v2.2.0

Radial gradients are here.

This release adds full support for radial-gradient() and repeating-radial-gradient() across the Gradiente pipeline: parsing, normalized gradient model, serialization, interpolation, Canvas 2D rendering, and WebGL rendering.

Added

Radial gradient support

Gradiente now supports CSS-like radial gradients:

radial-gradient(red, blue)
radial-gradient(circle, red, blue)
radial-gradient(circle closest-side, white, orange, black)
radial-gradient(ellipse 35% 70% at center, cyan, blue 60%, black)
radial-gradient(circle farthest-side at 25% 75%, white, hotpink 40%, navy)

Supported radial features:

• circle and ellipse shapes
• radial size keywords:
  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner
• explicit radial sizes:
  • circle 40%
  • ellipse 35% 70%
• keyword positions:
  • at center
  • at left
  • at right center
  • at top
  • at bottom
• value positions:
  • at 25% 75%
  • at 120px 80px

Repeating radial gradients

Gradiente now supports repeating-radial-gradient():

repeating-radial-gradient(circle, white 0%, orange 10%, black 20%)
repeating-radial-gradient(circle closest-side at center, white 0%, orange 8%, black 16%)
repeating-radial-gradient(ellipse 35% 70% at center, cyan 0%, blue 12%, black 24%)

The Canvas 2D and WebGL transformers were updated to better handle repeating radial gradients by expanding repeat stops according to the visible radial area.

Radial interpolation

Radial gradients now support color interpolation syntax:

radial-gradient(circle in oklab, red, blue)
radial-gradient(circle in hsl longer hue, red, blue)
radial-gradient(circle closest-corner at 75% 25% in oklch longer hue, red, yellow, cyan, blue)

Supported interpolation behavior is shared with linear gradients, including polar color spaces and hue interpolation when applicable.

Canvas 2D transformer

The Canvas 2D transformer now supports radial gradients, including:

• circle radial rendering
• ellipse radial rendering through canvas transforms
• radial positions
• explicit radial sizes
• interpolation sampling
• repeating radial gradients

WebGL transformer

The WebGL transformer now supports radial gradients using shader-based radial distance calculation.

Supported WebGL radial features include:

• circle and ellipse gradients
• radial size resolution
• keyword and value positions
• interpolation through sampled color stops
• repeating radial gradients with visible-area expansion

Improved

Shared renderable stop logic

Gradient stop preparation is now more reusable across gradient types.

The renderable stop pipeline can now be used beyond linear gradients, making it suitable for radial gradients and future gradient types.

Radial serialization

Radial gradient serialization now omits default values when possible.

For example:

radial-gradient(ellipse farthest-corner at center center, red, blue)

serializes compactly as:

radial-gradient(red, blue)

Non-default configuration is preserved:

radial-gradient(circle closest-side at right center in oklab, white, orange, black)

Fixed

• Fixed radial config parsing for explicit sizes such as ellipse 35% 70%.
• Fixed shorthand position parsing such as at center, at left, at right, at top, and at bottom.
• Fixed radial interpolation being dropped during parsing.
• Fixed Canvas 2D radial rendering incorrectly treating some radial sizes like farthest-corner.
• Fixed Canvas 2D radial interpolation by using sampled renderable stops.
• Improved consistency between CSS output, Canvas 2D, and WebGL radial rendering.

Known limitations

Some degenerate repeating radial cases may still differ between CSS and Canvas 2D/WebGL, especially when the radius becomes extremely small, for example:

repeating-radial-gradient(circle closest-side at left center, white 0%, orange 8%, black 16%)

These cases will be improved in a future rendering update, likely with a more procedural repeating implementation for WebGL.

Example

radial-gradient(circle closest-corner at 75% 25% in oklch longer hue, red 0%, yellow 25%, lime 45%, cyan 65%, blue 85%, purple 100%)

repeating-radial-gradient(ellipse 40% 80% at 35% 65% in hsl longer hue, red 0%, yellow 10%, cyan 20%, blue 30%)

Summary

Gradiente v2.2.0 expands the library from linear gradients into a much broader gradient system.

This release adds radial gradient parsing, serialization, interpolation, Canvas 2D rendering, WebGL rendering, and repeating radial support - a major step toward making Gradiente a practical gradient engine for modern rendering environments.

v2.1.2

feat: increment version to 2.1.2 in package.json

v2.1.1

Gradiente v2.1.1

This is a small patch release focused on improving the package distribution and release workflow.

Changed

• Added a browser-friendly global build for plain HTML usage.
• Updated package exports to match the new build output.
• Added CDN entry points for unpkg and jsdelivr.
• Added LICENSE to the published npm package.
• Improved npm package contents for cleaner distribution.

Gradiente v2.1.0 - Linear Gradient Upgrade

Gradiente v2.1.0

This release focuses on making linear-gradient much more complete, stable, and visually consistent across multiple rendering targets.

The main goal of this update is to bring Gradiente closer to native CSS gradient behavior while preserving its renderer-agnostic architecture.

Highlights

• Added CSS Color 4 interpolation support for linear gradients.
• Added support for color spaces such as oklab, oklch, hsl, lch, lab, srgb, display-p3, and more.
• Added hue interpolation support:
  • shorter hue
  • longer hue
  • increasing hue
  • decreasing hue
• Improved LinearGradient.toString() serialization.
• Improved angle formatting and directional keyword output.
• Added sampled interpolation for Canvas 2D and WebGL rendering.
• Improved visual parity between CSS, Canvas 2D, and WebGL outputs.
• Added initial repeating-linear-gradient support for Canvas 2D and WebGL.
• Improved cloning, immutability, config normalization, and internal safety tests.
• Reworked the playground to compare native CSS, Gradiente CSS output, Canvas 2D, and WebGL side by side.

Rendering improvements

Canvas 2D and WebGL now approximate CSS Color 4 interpolation by sampling interpolated colors into RGB stops. This allows Gradiente to render gradients such as:

linear-gradient(in oklab, red, blue)
linear-gradient(in hsl longer hue, red, blue)
linear-gradient(45deg in oklch increasing hue, crimson, gold, navy)

across CSS, Canvas 2D, and WebGL with strong visual consistency.

Notes

Some very dense repeating-linear-gradient cases may still show small differences compared to native browser CSS rendering. These are known approximation limits of the current Canvas/WebGL implementation and may be improved later with a gradient texture/LUT-based WebGL renderer.

Playground

The playground now supports one shared input rendered across all targets:

• Native CSS
• Gradiente CSS transformer
• Canvas 2D transformer
• WebGL transformer

This makes it much easier to compare rendering behavior and validate transformer consistency.

Full Changelog

See CHANGELOG.md for the full list of changes.

v2.0.0

🚀 Gradiente v2.0

Major release introducing a pattern-driven Gradient DSL, a full ABI parsing pipeline, and a modular architecture for building and validating gradients.

---

✨ Highlights

🧠 Gradient DSL (Pattern System)

Gradiente now includes a custom Domain-Specific Language (DSL) for describing valid gradient input structures.

^[([config,color-stop,([color-hint,color-stop]|color-stop)]|color-stop),~([color-hint,color-stop]|color-stop)].

With this DSL you can:

• define allowed input sequences
• validate gradient structures
• support custom gradient types (e.g. mesh, diamond, etc.)
• avoid hardcoded parsing rules

Gradients are no longer just parsed — they are validated against a formal structure.

---

⚙️ ABI Layer (Gradient as Data)

Gradients are transformed into a normalized ABI:

{
  functionName: 'linear-gradient',
  isRepeating: false,
  inputs: [
    { type: 'config', value: 'to left' },
    { type: 'color-stop', value: 'red 10%' },
    { type: 'color-hint', value: '50%' },
    { type: 'color-stop', value: 'blue 80%' },
  ]
}

This enables:

• predictable processing
• renderer-agnostic workflows
• easier transformations and exports

---

🔍 Modular Parsing Pipeline

Gradiente now uses a layered architecture:

1. Function extractor
   → finds gradient(...)

2. Top-level input splitter
   → safely splits arguments (handles nested functions)

3. Classifier
   → detects:

   • config
   • color-stop
   • color-hint

4. Pattern validator (DSL)
   → validates structure using your DSL

5. Matcher engine
   → executes the DSL against ABI inputs

---

🧩 Matcher Engine

A custom execution engine that:

• walks through pattern tokens

• matches against classified inputs

• supports:

  • sequences []
  • groups ()
  • alternatives |
  • repetition ~

This is effectively a mini pattern engine, purpose-built for gradients.

---

⚡ Performance

• ~100k inputs validated in ~18ms
• near-linear complexity
• safe repeat handling (no infinite loops)

---

🧱 Architecture

Gradiente is now structured as a set of independent modules:

• extractOuterFunctionCall — function parsing
• splitTopLevelInputs — safe argument splitting
• classifyInputs — ABI classification
• pattern-validator — DSL validation
• match — DSL execution engine

Each layer is isolated and reusable.

---

🔓 Extensibility

You can now define custom gradient rules:

parseStringToAbi(value, '^[color-stop,~color-stop].');

Example use cases:

• mesh gradients (no config)
• strict validation modes
• experimental gradient types

---

⚠️ Breaking Changes

• Full rewrite of parsing logic
• Old parsing behavior is no longer supported
• Gradients are now validated strictly via DSL

---

📌 Example

parseStringToAbi(
  'linear-gradient(to left, red 10%, 50%, blue 80%)'
);

---

🔮 What's next

• Gradient normalization layer

• Rendering adapters:

  • Canvas2D
  • PixiJS
  • Konva
  • WebGL / WebGPU

• Playground for DSL and gradients

---

🧠 Summary

Gradiente is no longer just a parser.

It is now a gradient engine with a validation DSL, designed for:

• visual editors
• rendering engines
• developer tooling

First release

Gradiente v1.0.1

Initial public release of Gradiente — a lightweight gradient engine for parsing CSS gradients into normalized data structures.

---

✨ What’s included

• Linear gradients (linear-gradient)
• Radial gradients (radial-gradient)
• Conic gradients (conic-gradient)
• Full support for repeating variants
• Automatic stop normalization
• Repeating gradient expansion into real stop data

---

🚀 Example

import { parse } from 'gradiente';

const gradient = parse('repeating-linear-gradient(red 10%, blue 20%)');

↓

[
  { color: 'red',  position: 0.1 },
  { color: 'blue', position: 0.2 },
  { color: 'red',  position: 0.3 },
  { color: 'blue', position: 0.4 },
  ...
]

---

🧠 Key idea

Gradiente transforms gradients from:

linear-gradient(...)

into a clean, predictable data model that can be used directly in:

• Canvas
• WebGL
• Pixi
• Konva
• visual editors and design tools

---

📦 Install

npm install gradiente

---

🎯 Why Gradiente

Most libraries treat gradients as strings.

Gradiente treats them as data structures.

---

🔗 Links

• npm: https://www.npmjs.com/package/gradiente
• repo: https://github.com/Flowscape-UI/gradiente

---

⚠️ Notes

This is the first public version.
The core API is stable, but improvements and new features are planned.

---

🔥 What’s next

• serialization (toString)
• gradient sampling
• documentation site
• playground