Skip to content

v2.4.0

Choose a tag to compare

View all tags
@NiceArti NiceArti released this 24 May 11:31
· 14 commits to main since this release
v2.4.0
91d23dd

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.

Assets 2
Loading