Color, Gradient and Image Fill


There are two ways to fill an object with a gradient:

Note that any of these methods does not exclude another. You can do part of the work with the help of one method and then finish using another.

Using the Gradient Tool

Add Gradient

To fill an object with a linear gradient:

  1. Select the object.
  2. Activate the Gradient tool Gradient tool icon on the Tools panel.
  3. Place the cursor over the object, press the left mouse button and drag. You have added the start point of the gradient.
  4. Move the cursor around to adjust the direction of the gradient and control the way it fills the object.
  5. Click to at the end point.

Adjust Gradient Colors

Let's see how a gradient is created. We'll talk about linear gradients for simplicity. In order to edit a gradient on the canvas, activate the Gradient tool.

Any gradient has two predefined colors at its ends. Let's call such predefined colors "base colors". Base colors are shown inside circles. The default gradient is based on two base colors. We'll see later how to add more.

Gradient that consists of two colors

All colors in the middle are generated by the software to create a smooth transition between the base colors.

The direction along which colors change is shown by a line that links the base colors. There are white and black handles at the ends of the line.

To add an intermediate base color, click on the line. A plus near the cursor shows that this operation is possible.

Adding a new color to a gradient

The third base color will be shown in a new circle attached to the line.

Gradient that consists of three colors

You can move base colors using the mouse in order to change the distribution of colors over the given area.

To delete an intermediate color, drag it off the line until a cross appears near the cursor. Then release the mouse button.

Removing an intermediate color from a gradient

Only intermediate base colors can be deleted.

In order to change a base color, click on the corresponding circle. Then use a simplified version of the Color panel to select a new color.

Adjust Gradient Position

The black and white handles let you rotate the gradient and also change the distance between the base colors at the ends.

To move the gradient in relation to the object, drag the line which links the two handles. Alternatively, drag the white and black handles to new positions.

To rotate the gradient, drag either black or white handle around the opposite one.

To change the width of the color transition area, move one handle to or away from another handle.

Using the Color Panel

The Gradient section of the Color panel showing settings of linear gradient

Add Gradient

When you open the Gradient tab of the Color panel, you automatically apply a default gradient to the currently selected object.

Adjust Gradient Colors

You can add and delete base colors in the same way as you can do on the canvas. See the Adjust Gradient Colors subsection for details.

In order to change a base color, click on the corresponding circle.

Drag circles that define the location of base colors to make different color tints take up more or less space.

You can set all colors at once by clicking on a predefined or custom swatch.

Adjust Gradient Position

The Scale parameter lets you change the distance between the base colors at the ends. The result is equivalent to moving the black handle on the canvas closer or farther from the white one.

Use the rotation control to change the direction of the gradient.

To move the whole gradient relative to the object, use the square control. Note that it is more convenient to move and rotate gradients directly on the canvas.