Gradients Overview

In addition to the Color palette, Fill and Stroke have a Gradient palette. Gradients consist of smooth color transitions along a specified direction from one color to another. There are two types of gradients: linear and radial.

Gradients work with gradient stops where the two colors are specified and indicating where they start and stop.

The Gradients and Gradient stops are properties, added to the object in the Objects pane. For more information, see the Figures section.

It is not difficult to change the gradient properties, but you have to have some understanding of the parameters involved. In most cases, it is sufficient to use the standard Gradient palette.

There are two types of gradients, linear and radial, each with somewhat different properties. These properties are displayed in objects under the corresponding shape object in the Objects tree. For more information, see the Figures section.

A linear gradient has a StartPoint and an EndPoint, local coordinates for the direction of the gradient.

Example: A linear gradient, with a diagonal direction from 0, 0 to 1, 1; and a horizontal gradient from 0.3, 0 to 0.7, 0 (with SpreadMethod “Pad”):

A linear gradient also has a SpreadMethod, which tells how the areas outside the StartPoint and the EndPoint are to be treated. There are three methods:

  • Pad (default): Extends the gradient end colors to the respective ends of the object.
  • Reflect: Reflects the gradient like a mirror placed at the StartPoints and EndPoints.
  • Repeat: Repeats the gradient pattern, as far as the “outside” areas stretches.

Example: The three different SpreadMethods used with the same StartPoints and EndPoints:

A radial gradient has the following properties:

  • Focus: Point that defines where the radial gradient starts.
  • Center: Center point for the circle (ellipse) that defines where the radial gradient ends.
  • RadiusX: One of the two axes for the circle (ellipse) that define where the radial gradient ends.
  • RadiusY: One of the two axes for the circle (ellipse) that define where the radial gradient ends.

Example: An ellipse, created with one of the standard circular gradient patterns from the Fill Gradient palette with an off-center focus, suggesting light from upper-left:

The SpreadMethod for a radial gradient is always “Pad”.

The colors at the StartPoint and EndPoint of a gradient (linear or radial) are specified in two GradientStop objects, belonging to the “parent” LinearGradient or RadialGradient object.

The GradientStop objects also have an Offset, which modifies where the gradient starts and stops. If the values are 0 and 1, the StartPoint and EndPoint are not modified.

Example: A rectangle with two different pairs of settings for the GradientStop, in the lower case modified by the GradientStop Offsets:

Gradients and gradient stops can be used in more complex ways.

For example, you can add more GradientStops to a Linear/RadialGradient to make the color change at each Offset distance. Below is an example with three GradientStops.

We use a square, 400x400, in which we want the gradients to run roughly in a diagonal direction, but described only within the inner part of the square. By setting the StartPoint to (0.2, 0.4) and the EndPoint to (0.7, 0.9), the gradients will run from the coordinates (180, 260) to (380, 460).

Example: A square with a limited linear gradient, three gradient stops, and two "SpreadMethod" areas outside the linear gradient definition:

The three GradientStops have the following properties:

  • Color 1 (green), Offset=0.1
  • Color 2 (none), Offset=0.3
  • Color 3 (blue), Offset=0.7

The area between Offset=0 and Offset=0.1 is padded with Color 1 (green).

The area between Offset=0.1 and Offset=0.3 gradually changes from Color 1 (green) to Color 2 (transparent).

The area between Offset=0.3 and Offset=0.7 gradually changes from Color 2 (transparent) to Color 3 (blue).

The area between Offset=0.7 and Offset=1 is padded with Color 3 (blue).

The two areas outside the LinearGradient definition use the same SpreadMethod, in this case Repeat, but Pad or Reflect could also have been used. With Repeat, the pattern is repeated according to the defined gradient. With Reflect, the pattern would have been mirrored, and with Pad the outermost colors (here 1 and 3) would have been extended.

NOTE: You have to add the GradientStops to the Objects pane in a strictly ascending Offset order (0 to 1), otherwise the result is undefined. When you add a GradientStop to the list, its Color and Offset are undefined, which means that the associated object are transparent until the parameters have been set.

For more information, see the following sections: