Colors

Gradients

Gradients allow you to show transitions between multiple colors at different positions in a layer.

The fill and stroke properties of a path layer can be set to gradients.

In order to use a gradient instead of a solid color, use the color type selector in the color picker. You can choose between linear and radial gradients.

Linear Gradient#

Linear gradients create a color transition between two or more points in a straight line.

Radial Gradient#

Radial gradients transition between the gradient colors outwards from a center point until a specified radius is reached.

Editing#

When a gradient type is selected, the color picker shows a gradient slider at the top. You can use this slider to select, add or remove color stops or to change their relative position within the gradient.

The color picker also shows gradient handles on the canvas, which you can use to move the start and end points of the gradient within the layer in addition to the edits that you can make with the gradient slider.

Color Stops#

Every gradient consists of two or more color stops. A color stop defines the color and relative position of a color in the gradient.

The gradient then interpolates between neighboring color stops.

You use the gradient handles on the canvas to define the position of the gradient in a layer. The gradient is positioned in the local coordinate system of the layer. This means that any transform edits to the layer will automatically apply to the gradient as well but moving the individual path control points will not move the gradient.

Editing Color Stops#

You can add new color stops by tapping in the region between two existing stops either on the canvas or in the gradient slider of the color picker.

Drag the color stops to change their relative positions within the gradient.

Select gradient stops by tapping them on the canvas or the gradient slider. The selected gradient stop has a white outline. The color picker always selects the color of this selected color stop.

Delete Color Stops#

Tap the selected color stop again to show an option to delete it. The color stops at the very beginning and the end of the gradient cannot be deleted.