GradientPicker

All Components

GradientPicker

Gradient colour picker supporting linear and radial gradients with draggable stops, per-stop alpha, angle/radial controls, and preset swatches. Composes ColorPicker and AnglePicker.

Inline Mode

Full gradient editor rendered inline. Drag stops to reposition, click the bar to add, right-click to remove.


                

Popup Mode

Compact trigger swatch that opens the gradient editor in a dropdown panel.


                

Radial Gradient

Initialised with a radial gradient. Centre and radius controls appear instead of angle.


                

Custom Presets

App-defined preset swatches for brand gradients.

Size Variants

Mini (22px), Small (28px), Default (34px), Large (42px) — popup triggers.

Programmatic API

Control the gradient via JavaScript.


                

DiagramEngine Integration

toGradientDefinition() converts the gradient to DiagramEngine's format. fromGradientDefinition() loads it back.