Gradients

To give a shape a gradient fill, select it, then click on the Fill button and the inspector will show the color tool. To learn how to work with colors read that chapter first. At the top of the color panel you can choose between a Color, various gradients, Pattern or Noise fills.

The available gradients are Linear, Radial or Circular gradients but each works effectively the same in Sketch.

If you pick a linear gradient, you will see two or more dots connected by a line overlaying your layer. Each dot on the line represents a color stop of the gradient and the space between the stops is drawn in a smooth transition of the colors.

To change the color of one of the stops, click on it in the canvas. You’ll see that the color picker in the inspector updates to the color of that stop. Pick a new value in this color picker and you’ll see the result update immediately.

To insert a stop between points, click halfway on a line and you’ll see another stop gets added. You can move the stops between the starting and finishing point to determine the smoothness of the gradient and you can move the first and last point to change the direction of the gradient.

To delete a color stop, select it in the canvas and press the Delete or Backspace key on the keyboard.

Radial Gradients

If you selected a radial gradient earlier the first point on the line will be the center of the gradient and the last one will determine the size of gradient.

You’ll notice there’s another dot on the wider circle which you can drag to change the circular gradient into an oval one.

Circular Gradients

Circular Gradients go clockwise around the center point of a layer. You can add color stops wherever you want by click on the line and removing/dragging points works as you would the same as for linear gradients.

Gradient Bar

New in Sketch 3 is the addition of a more traditional gradient-editing bar in the inspector. You will see the gradient go from left to right, with any additional stops in between.

Shortcuts

Also new in Sketch 3 are various shortcuts for quickly positioning points. You can press the 1-9 keys on any stop except the first or last, to position it at 10%-90% of the line. So pressing 5 will put the stop always exactly in the middle of the line.

If you want to position the stop in the middle exactly between the stop before and after it, press the = key on the keyboard.

You can also use the Tab key to quickly switch between color stops and you can use the arrow keys to move the stops around on the left. Use the Shift key to amplify the effect.

Gradients on Borders

Sketch can also render a gradient on a border stroke and this works very similar to a gradient fill. Instead click on the color button of the border and repeat the procedure.