Web Code Globe Web Code Globe


Gradients can be used to fill rectangles, rounded rectangles, ovals, beziers, stars and polygons. WebCode supports multi-step gradients. You can also choose between linear (defined by an angle or two points) and circular gradients with each use. Gradients depend on the colors they use, and when these colors are adjusted, the gradients are also updated accordingly.

Using a gradient

To use a gradient, select it from the fill popup button menu:

Setting a gradient fill

This menu is automatically populated with your Library colors and gradients. Gradients occupy the lower half of the popup menu.

Adding a new gradient

There are 2 basic ways of adding a new gradient:

  • Click on the “+” button at the top of the gradient list in the Library
  • Click on the “Add new gradient...” menu item in the fill popup menu. This also sets the newly-created gradient as a fill.

(note that you can also add gradients by copying and pasting shapes that use gradients from another document)

Editing a gradient

You can edit a gradient by double-clicking on it in the library. Alternatively, you can reselect the same gradient in the Inspector popup button to show the edit color popover.

Gradient EditorGradient Editor

Gradient EditorGradient Editor The text field contains the name of the gradient. WebCode generates all names for you, but you can always change them to be more descriptive.

To the right is the gradient control. Using it, you can specify the positions of individual colors in the gradient.

Changing gradient color value

To change a color in the gradient, click on a color knob at the bottom of the gradient control. Then, select the desired color from the color popup button below the gradient control.

Adjusting color value conveniently from gradient popover

Sometimes, you need to adjust the shade of a color in the gradient. You can always close the gradient popover, open the color popover and adjust the color there, but this is inconvenient. It is possible to adjust a basic color using the color well at the right side of the color popup button, right from the gradient popover.

Adding a new color directly from gradient popover

If the color you are trying to adjust using the color well in the gradient popover isn't a basic color (i.e. it is a system color or a derived color), a new basic color is created and automatically replaces the old color.

Adjusting gradient color position

To adjust the position of a color in the gradient, simply drag the color knob to the desired position. To position the knob to some of the predefined positions, hold the SHIFT key while dragging it. The predefined positions are represented by tick marks.

Alternatively, you can fine tune the position of the selected knob using the LEFT and RIGHT arrows on your keyboard.

Adjusting linearity between colors

Gradient EditorGradient Editor It is also possible to alter the progression of the gradient between two neighboring colors by dragging the knobs at the top of the gradient control.

Adding more colors to a gradient

You can add more colors to a gradient by double-clicking at the desired position in the gradient control. A new color, represented by a new color knob, is added to the gradient. This is a new basic color that can be replaced (by choosing a different color in the popup button) or adjusted later.

Removing color from a gradient

To remove color from a gradient, select the corresponding color knob in the gradient control and press the DELETE key. Note that this only removes the color from the gradient, not from the Library.

Drawing linear gradients

After selecting a gradient from the fill popup button menu in the Inspector, you can choose the “Angular” gradient option. Linear Gradient

To adjust the angle of the linear gradient, you can either input it directly to the text field, or use the circular slider control. By default, the circular slider snaps to multiples of 45 degrees. You can suppress this by pressing down the OPTION key while dragging.

If you want to specify the start point and the end point of the gradient manually you can do so by choosing the “Two Point” gradient option. A two point gradient editing interface automatically appears in the Canvas. This interface is visible whenever you select a shape with two point gradient fill.

Drawing circular gradients

To draw a circular gradient, you have to select a gradient from the fill popup button menu in the Inspector. Then, you have to choose the “Circular” gradient option.

Circular GradientCircular Gradient

A circular gradient editing interface automatically appears in the Canvas. This interface is visible whenever you select a shape with circular gradient fill. It consists of two circles, each representing one “end” of the circular gradient.

You can drag the center of either of these circles to a new position. In addition, you can also adjust the size of the circles. Just click anywhere on the diamater of the circle and drag.

By default, the center and the diameter of both circles snaps to the edges of the edited shape. To suppress this, hold down CONTROL key.