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.