Gradient Editor

Apply linear and radial gradients to any shape or text object. The gradient editor supports multiple color stops, angle control, and transparency.

Linear Gradients

Linear gradients transition between colors along a straight line defined by an angle.

// Apply a linear gradient fill
engine.applyGradientFill(id, {
  type: 'linear',
  angle: 90,
  colorStops: [
    { offset: 0, color: '#ff0000' },
    { offset: 1, color: '#0000ff' },
  ],
});

Radial Gradients

Radial gradients transition from the center outward in a circular pattern.

// Apply a radial gradient fill
engine.applyGradientFill(id, {
  type: 'radial',
  colorStops: [
    { offset: 0, color: '#ffffff' },
    { offset: 1, color: '#000000' },
  ],
});

Multi-stop Gradients

Add as many color stops as needed. Each stop has an offset between 0 and 1 indicating its position along the gradient.

// Multi-stop gradient (rainbow)
engine.applyGradientFill(id, {
  type: 'linear',
  angle: 0,
  colorStops: [
    { offset: 0, color: '#ff0000' },
    { offset: 0.17, color: '#ff8800' },
    { offset: 0.33, color: '#ffff00' },
    { offset: 0.5, color: '#00ff00' },
    { offset: 0.67, color: '#0088ff' },
    { offset: 0.83, color: '#0000ff' },
    { offset: 1, color: '#8800ff' },
  ],
});

// Gradient with transparency
engine.applyGradientFill(id, {
  type: 'linear',
  angle: 180,
  colorStops: [
    { offset: 0, color: 'rgba(59, 130, 246, 1)' },
    { offset: 1, color: 'rgba(59, 130, 246, 0)' },
  ],
});

💡

RGBA support

Color stops support rgba values, allowing you to create gradients that fade to transparency.

Angle Control

For linear gradients, the angle property controls the direction of the gradient in degrees (0-360).

// Horizontal gradient (left to right)
engine.applyGradientFill(id, {
  type: 'linear',
  angle: 0,     // 0 degrees = left to right
  colorStops: [
    { offset: 0, color: '#4f46e5' },
    { offset: 1, color: '#ec4899' },
  ],
});

// Vertical gradient (top to bottom)
engine.applyGradientFill(id, {
  type: 'linear',
  angle: 90,    // 90 degrees = top to bottom
  colorStops: [
    { offset: 0, color: '#4f46e5' },
    { offset: 1, color: '#ec4899' },
  ],
});

// Diagonal gradient
engine.applyGradientFill(id, {
  type: 'linear',
  angle: 45,    // 45 degrees = top-left to bottom-right
  colorStops: [
    { offset: 0, color: '#4f46e5' },
    { offset: 1, color: '#ec4899' },
  ],
});

Common Angles

Name	Type	Default	Description
`0`	`degrees`	—	Left to right
`45`	`degrees`	—	Top-left to bottom-right (diagonal)
`90`	`degrees`	—	Top to bottom
`135`	`degrees`	—	Top-right to bottom-left (diagonal)
`180`	`degrees`	—	Right to left
`270`	`degrees`	—	Bottom to top

Gradient Options

GradientFillOptions

Name	Type	Default	Description
`type`*	`'linear' \| 'radial'`	—	Gradient type
`angle`	`number`	`0`	Gradient angle in degrees (linear only)
`colorStops`*	`ColorStop[]`	—	Array of color stop objects

ColorStop

Name	Type	Default	Description
`offset`*	`number`	—	Position along gradient (0 to 1)
`color`*	`string`	—	Color at this stop (hex, rgb, rgba, or named)

Removing Gradients

To switch back to a solid fill or remove the fill entirely:

// Switch back to solid fill
engine.updateObject(id, {
  fill: '#4f46e5',
});

// Remove fill entirely
engine.updateObject(id, {
  fill: 'transparent',
});

UI: Fill Type Selector

In the Property Panel, the fill section provides a type selector with three options:

Solid — single color picker
Gradient — gradient editor with stop bar, color pickers per stop, angle slider, and linear/radial toggle
None — transparent fill

The gradient stop editor allows clicking on the gradient bar to add new stops, dragging stops to reposition them, and clicking a stop to change its color. Double-click a stop to remove it.

ℹ️

Minimum stops

A gradient must have at least two color stops. The editor enforces this by preventing deletion when only two stops remain.