Skip to content

Gradiente v2.1.0 - Linear Gradient Upgrade

Choose a tag to compare

View all tags
@NiceArti NiceArti released this 13 May 19:51
· 31 commits to main since this release
v2.1.0
bfda82c

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.

Assets 2
Loading