Gradient Tool

Gradient Tool

Gradient color pop-up.

The Gradient tool, from the application toolbox, can be used to interactively edit gradient fills. The gradient tool can edit the fill, stroke or transparency gradients as well, depending on the selection made in the Mode field of the gradient panel.

The gradient tool works differently on different gradient shape types. Each gradient shape provides a number of geometric controls that are displayed as handles when using the gradient tool. In addition to controling the gradient shape parameters, the gradient color stops are also displayed in a form dependent on the gradient shape.

Editing Colors

While using the gradient tool, the colors of the gradient can be selected, moved and changed. To see the gradient colors, hover over the segment indicating the colors. The shape of the segment used to edit the gradient colors is determined by the gradient shape. The gradient color handles are only shown when hovering over the handles or the segment.

The handles shown by the gradient tool when editing a gradient can be clicked and dragged to change the corresponding gradient attribute. When selected, a handle is shown in an enlarged form.

To edit the color of a gradient stop, select and double click the handle of the color. This will open a pop-up containing the selected gradient color stop position, opacity and color selection options.

  • Position - Edit the position of the selected gradient color stop along the axis of the gradient colors.
  • Opacity - Edit the opacity at the selected gradient color.
  • The color selection options shown in the pop-up are similar to the color panel, and can be used to select the color of the gradient color stop.

Linear gradient.

Editing Linear Gradients

When editing a linear gradient, the following handles are shown:

  • (A) the line indicating the linear gradient direction.
  • (B) the starting point of the linear gradient.
  • (C) the ending point of the linear gradient. Dragging the starting and ending points can set the linear gradient direction.
  • (D) the last gradient color. Gradient colors are shown in circular handles filled with the color.
  • (E) the first gradient color, in selected state. The selected gradient color handle is larger.
  • (F) the midpoint handle to adjust the gradient transition.
  • (G) the gradient color axis. Hover over this axis to show the handles.

Editing Concentric Gradients

Concentric gradient.

When editing a concentric gradient, the following handles are shown:

  • (A) the outer radius of the concentric gradient. Drag this handle to set the concentric gradient extent.
  • (B) alternate handle for the outer radius of the concentric gradient.
  • (C) the concentric gradient stretching handle. Drag this handle to stretch the gradient.
  • (D) the axis of the concentric gradient, representing the rotation of the gradient.
  • (E) the outer margin of the concentric gradient. Hover over this circle to rotate the concentric gradient.
  • (F) center points of the inner and outer region. Initially, the two centers overlap. Dragging these nodes the inner and outer region centers can be moved.
  • (G) concentric gradient offset handle.
  • (H) a color stop in the gradient. Click to select, and double click to edit the color.
  • (I) the middle point handle controlling the transition between two gradient color stops.
  • (J) a selected gradient color stop.

Editing Conical Gradients

Conical gradient.

When editing a conical gradient, the following handles are shown:

  • (A) the center of the conical gradient. Drag this handle to move the gradient center.
  • (B) the conical gradient extent and rotation. The extent of a conical gradient is visible when using a shape other than line as the conical gradient shape.
  • (C) alternate handle to change the gradient extent and rotation.
  • (D) the handle of the last color stop in the gradient colors.
  • (E) a midpoint handle between two gradient color stops.
  • (F) the axis of the conical gradient indicating the rotation.
  • (G) a selected color handle shown with a larger node.

Editing Spiral Gradients

When editing a spiral gradient, the following handles are shown:

Spiral gradient.

  • (A) the center of the spiral gradient. Drag this handle to move the gradient center.
  • (B) the spiral extent and revolution number handle. Drag this handle to change the number of revolutions the spiral makes and the extent of the spiral.
  • (C) the spiral density handle. Drag this handle to change the variation of the distance between consecutive revolutions of the spiral arms.
  • (D) handle to set the spiral extent.
  • (E) the first and last color stop from the gradient color. If the first and last color stops are at the start and end locations, these will overlap.
  • (F) handle to stretch the spiral vertically.
  • (G) hover and click over the outer margin to rotate the spiral.
  • (H) a color stop handle used to edit a gradient color. Drag to change the color position. Double click this handle to edit the color and opacity.
  • (I) color midpoint handle. Drag to control the transition between consecutive gradient colors.