Gradient

Gradient layer is equivalent to CAGradientLayer class. It is used to fill gradient along a shape. As in CAGradientLayer, only linear gradient is supported. In QuartzCode, gradient is embedded as a property of shape layers. So you can easily add gradient to an existing shape layer.

To add gradient to an existing shape, click on the gradient well at fill section in Layer Inspector.

To change back to color fill, simply click at the color well above gradient well.

Modifying Gradient

When gradient well is clicked, a line with gradient stop will be shown on top of the layer. To change a gradient stop, click on it and drag it to change position.

To insert a gradient stop, double click anywhere along the gradient line. A new gradient stop will be added.

To delete a gradient stop, click at a gradient stop and press DELETE button.

To change color of gradient stop, click on any stop and you will see floating color panel will update the color of that stop. Changing color in color panel will then change the color at the stop.

Shortcut

You can quickly set any gradient stop except first and last by using CMD + (1-9) keys to position it 10%-90% of the line. You can also press ‘=’ key to put the stop exactly at middle of the stop before and after it.