Gradients
Linear, radial and angular gradients on fills and borders, with animated angle, shift and crossfades.
Fills and borders can be gradients, and gradients can move: rotate them, slide their colors for a shimmer, or crossfade one paint into another. The paint editor is the same wherever you pick a color.
- Select a layer and click its fill (or border) swatch in the inspector.
- Choose Linear, Radial or Angular at the top of the paint editor. From a solid color, the new gradient fades that color out, a calm default.
- Click the gradient bar to add a stop; drag stops to move them. Drag a stop well above or below the bar to remove it (at least two stay).
- Click a stop to select it (it's ringed) and pick its color below.
- Turn the gradient with the angle dial; hold ⇧ to snap to 15°. Radial gradients have a Size slider (0.1–1.5). Reverse the stops flips the order.
Animate a gradient
| Property | Range | Effect |
|---|---|---|
gradientAngle | Degrees | Rotates a linear or angular gradient |
gradientShift | −2 to 2 (one step = one gradient length) | Slides the stops, for shimmer and sheen |
gradientMix | 0 to 1 | Crossfades to a second paint |
- Add keyframes for these in the timeline, or ask the AI (“rotate the border gradient once over 3 s, linear”).
- Blend to Another Paint (under a gradient fill) sets up a crossfade from the playhead to a second paint, keyed from 0 to 1 over one second.
- Shimmer (in the effects menu of text and rectangles) adds a moving sheen to the end of the scene.