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.
To use a gradient, select it from the fill popup button menu:
This menu is automatically populated with your Library colors and gradients. Gradients occupy the lower half of the popup menu.
There are 2 basic ways of adding a new gradient:
(note that you can also add gradients by copying and pasting shapes that use gradients from another document)
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.
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.
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.
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.
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.
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.
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.
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.
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.
After selecting a gradient from the fill popup button menu in the Inspector, you can choose the “Angular” gradient option.
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.
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.
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.