Gradient Panel

The Gradient panel, opened from the Panels menu, is used to setup gradient fill, outline style or transparency mask of the selected objects. If the selected object contains a gradient fill, outline or transparency mask, the gradient is shown in the gradient panel.

The gradient panel consists of three sections:

• The upper section contains the common gradient attributes, and a preview of the gradient that also server as a button to open the list of gradient styles and presets. In addition to these, two gradient options (Distorted and Scale First, see below) can be found in the panel menu.
• The middle section contains basic gradient shape attributes. Selecting a gradient shape may change the content of this section (see below in Selecting Shape).
• The lower section contains the gradient color editing. The gradient color stops can be edited in the gradient slider. Existing gradient color styles and can be selected from the gradient color drop box. More gradient color options can be found in the Gradient Color Selector view.

The gradient slider can be used to create, change and remove color stops in a gradient:

• The gradient color transition is shown along the slider.
• The gradient color stop positions are indicated with small triangular handles, containing the color at that position.
• A color stop can be selected by clicking on the triangular handle.
• The opacity of the selected color stop can be edited in the Opacity field.
• To change the position of a color stop, drag the triangular handle along the gradient.
• To remove a color stop, drag the triangular handle outside of the gradient slider area.
• To insert a new color stop, click into an empty location below the gradient color preview, and start dragging to set the new color stop position.
• To edit the color at a gradient color stop, double click the triangular handle of the color stop, and select the color from the color pop-up.
• The gradient transition between two color stops is adjusted by dragging the circular handle shown between two colors.

Selecting Gradients

The fastest way to apply a gradient to the selected object is to pick it from the gradient style and presets list opened with the gradient button (upper-left corner of the panel). When opened, a list of gradient styles and presets are shown. The list shows the styles first and then the presets. Select a gradient from this list by clicking on the box.

The gradient panel contains the following common gradient options:

• Mode - Open a drop box to pick the target of the gradient selection. This can be Fill, Stroke or Transparency. The target is swapped between Fill and Stroke by the color panel target selection as well.
• Shape - Shows the predefined gradient shapes and the list of gradient shape styles and presets. The predefined shapes are Linear, Concentric, Conical, Spiral and Noise. The shapes of Linear, Concentric and Conical gradients can be set to an arbitrary shape, while the Noise gradient can contain any of the existing noise styles (see the Noise chapter, on selecting noise). When selecting a shape type (predefined, style or preset), the shape specific middle section of the panel is changed to contain attributes of the gradient shape type.
• Stroke - Select the gradient on stroke rendering modes. Normally, a gradient is rendered as a fill style, filling the area covered by the stroke of an outline. This corresponds to the Normal option of the Stroke field. To render a gradient across or along a stroke, select the Across Stroke or Along Stroke stroke options from the Stroke field. The Stroke field is available only when selecting gradient style for a stroke.
• Angle - Edit the rotation of the gradient.
• Scale - Edit the vertical stretching of the gradient. In some gradient shapes (linear shape with a straight line), the scaling factor may have no effect on the gradient.

Selecting Shape

The gradient shape is selected from the Shape field of the gradient panel. For each gradient shape type, the basic shape specific options are shown in the middle section of the gradient panel.

• For Linear gradient shapes, the shape section contains a shape selection drop box and the Amplitude value. The shape selection drop box opens a list of shape styles and presets, containing open shapes. The linear gradient shape can be set to any shape style or preset, including object references using the linear gradient shape role, as long as these are open shapes. The linear gradient amplitude stretches the shape along the gradient direction.
• For Concentric gradient shapes, the shape section contains a shape selection drop box with a list of closed shape styles and presets. The shape list will also contain object references with concentric gradient shape roles, when the object has a closed shape. The End field contains the position of the last color stop (location of the concentric shape).
• For Conical gradient shapes, the shape section contains a shape selection drop box and an Amplitude value. The shape selection drop box opens a list of shape styles and presets, containing open shapes. The conical gradient shape can be set to any shape style or preset, including object references using the conical gradient shape role, as long as these are open shapes. The conical gradient amplitude stretches the shape along the gradient color direction.
• For Spiral gradient shapes, the shape section contains the Cycles and Density fields. The Cycles field edits the number of cycles (or rotations) the spiral should make before filling the area with the gradient. The Density field edits the density of the spiral, or the speed of change in the distances between arms of spiral revolutions.
• For Noise gradient shapes, the shape section contains the Noise field and a check box. The Noise field opens a menu of noise type selections, including any noise style or preset that were defined previously. The menu also contains access to the noise browser (Browse Styles) and the noise editor (Edit Noise). The Normalized check box is used to normalize the noise. This option is on by default. If not normalized, the noise may result in values outside of the minimum and maximum gradient color region, resulting in flat regions in the gradient (depending on the noise style).

For more gradient shape options, select the Edit Gradient command from the panel menu.

Selecting Color

The lower section of the gradient panel contains various gradient color selection options. The following gradient color options are accessible from the panel:

• Styles - Shows the preview of the gradient color, including the color repetitions. If the area with the gradient is clicked, a list of gradient color styles and presets is shown. This list shows the styles first, including any object reference using gradient color role. Picking a gradient color from this list will not alter the gradient shape. Clicking the arrow on the right side of the widget opens the gradient color selector modal view to access more gradient options.
• - Reverse the direction of gradient colors.
• Opacity - Edit the opacity level of the selected gradient color stop.
• Repeat - Set the number of repetitions of the gradient color. By default, this value is 1.
• - Set the gradient opacity mode to none. With this mode the Opacity field is not visible, and the gradient opacities are removed.
• - Set the gradient opacity mode to use the same stops as the gradient color. In this mode, the Opacity field sets the opacity at the selected color stop (see color stop editing below).
• - Set the gradient opacity mode to be separate from the gradient color stops. In this mode, the gradient opacity can be defined using different stop positions. The gradient color editor widget will show the opacity stops at the top of the gradient bar.
• - Open a menu of extra gradient color options. These options control how the gradient color transition is calculated and rendered. For a detailed description see the Gradient Color Selector section.

The gradient color can be edited using the gradient slider at the bottom of the gradient panel. The gradient slider shows the handles used to adjust the color stops and the color transition midpoints. The following steps can be used to edit the gradient color:

• To adjust the position of a gradient stop, drag the arrow handle associated with the color.
• To adjust the midpoint between two colors, drag the round handle located between the colors.
• To insert a new gradient color stop, click at any empty location along the slider handles. A new color stop is created. Drag the handle to position the color stop.
• To remove a gradient color stop, drag the handle outside of the slider handle region.
• In case of separate transparency mode, the transparency handles are shown at the top of the gradient color bar.

Gradient Panel Menu

The following commands can be accessed from the gradient panel menu:

• Edit Gradient - Open the modal gradient selector view. The gradient selector view contains more options to set the gradient color and shape. For a detailed description of this view see the Gradient Selector section.
• Gradient Color - Open the modal gradient color selector view. The gradient color selector view contains more options for the gradient color. For a detailed description of this view see the Gradient Color Selector section.
• Flip Colors - Reverse the order of colors in the gradient color.
• Distorted - Enable or disable the distortion of the gradient using the current object transform. The effect of this option is visible with rotated and non-uniformly scaled objects.
• Scale First - Enable or disable the scaling of the gradient before applying the object scaling.
• Save Gradient Color Preset - Create a new gradient color preset from the current gradient color options.
• Save Gradient Color Style - Create a new gradient color style from the current gradient color options.
• Save Gradient Shape Preset - Create a new gradient shape preset from the current gradient shape options.
• Save Gradient Shape Style - Create a new gradient shape style from the current gradient shape options.
• Save Gradient Preset - Create a new gradient preset from the current gradient options.
• Styles - Opens a list of the available gradient style definitions, including object references with the gradient role. Available only if gradient styles were defined in the document. Select a style from this list to apply it to the selected object.
• Save Gradient Style - Creates a new gradient style from the current gradient options.
• Presets - Opens a list of the previously defined gradient presets. Select a preset from this menu to apply the gradient to the selected object.