Gradient is a transition between 2 or more colors or between a color and transparency.

Gradients may be applied to shapes or to buttons only.

To apply a gradient fill to a shape

Select the shape and choose "Item" > "Gradient Fill". Select a gradient style and modify both colors.

Creating 3D look with vertical gradients

To create 3D look apply vertical gradients to all items. Use light to dark and dark to light gradients.

Creating glows with transparent gradient:

To create a glow draw an ellipse and apply a radial gradient to it. Click Outer color and select "No color" option to define opaque to transparent gradient.

Simulating 3D look with 2 gradient circles:


Gradient Distances

Gradients are defined from left to right or from top to bottom or from the center to the edge:

Distance values control the position of the color in the gradient. By default gradient spans from 0 (left) to 255 (right). To reduce gradient area click Advanced option and modify distance values so they are closer to each other.

To add more colors to the gradient click Add Colors. Multipoint gradients can have up to 8 control points.

See linear-gradient.sfd file in examples folder