Gradient Builder
Last updated
Last updated
The Gradient Builder allows you to create simply and visually complex Gradients for your unique designs.
The Gradient Builder is available for Background and Overlay.
Wherever you see the Gradient Builder icon, you can click the Colour Picker to access the Gradient Builder.
The Gradient Builder is accessible from the Background and Overlay properties in the Colour tab.
Find Background or Overlay.
Click the Gradient Builder Icon next to the Colour Picker to open Gradient Builder.
Make sure that the Gradient Builder tab is selected.
The Solid tab will take you back to the normal Colour Picker.
There are three types of Gradient available from the Gradient Builder, Linear, Radial and Conic gradients.
The Linear Gradient function creates a progressive transition between two or more colours along a straight line.
To open the Linear Gradient, click the Linear tab.
You will notice a linear gradient (in a straight line) between the selected colours.
You can change the axis of your Linear Gradient as required.
There are two ways of changing the axis:
Either drag the Gradient wheel to select the required degree.
Or click the degree number and input required degree.
The Radial Gradient function creates an image consisting of a progressive transition between two or more colours that radiate from an origin.
To modify the origin of a Radial Gradient, drag the white dot to the required position.
The origin of the Radial Gradient can be modified freely along the X and Y axis as required.
The Conical Gradient function creates an image consisting of a gradient with colour transitions rotated around a centre point.
The Conical Gradient can be modified in two ways:
Either by rotating the outside dot to the required degree.
Or by dragging the inner dot to the required position along the X and Y axis.
The Gradient you have created (Linear, Radial or Conical) can be copied by double clicking the input field.
The Gradient Information window provides accurate information on the type of gradient, the degree of rotation, the position along the X and Y axis and the colours used for the gradient.
The "Reset" dot allows you to return to the default gradient position.
To reset gradient:
Either click the blue dot as shown below.
Or click the "X" icon next to the input field.
The Vivid Maker is a way of avoiding the dead grey zones that are so unpleasant in the mid sections of your gradients.
The Vivid Marker allows you to use colour theory to create rich, vivid, thoroughly-alive gradients with no grey areas.
As a result, we're effectively walking through the colour wheel.
Click the Vivid Maker icon to open the Vivid Colour modal as below.
Choose the colour system you wish to apply.
You can choose the number of intermediary colours you wish to apply for greater precision.
The default number is 7.
Open the Vivid Maker modal.
Find Precision.
Modify the number of colours as required.
Reset to default by clicking the blue dot.
The Bezier Interpolation adds a flexible method of curve generation and smooths out the hard edges of the gradient.
Open the Vivid Maker modal.
Toggle on Bezier Interpolation.
To Apply Vivids, click the button as below.
To reset, click the "Reset to Previous" icon to the right of "Apply Vivids".
The Colour Stop function allows you to choose the colours amongst which you wish to render smooth transitions.
This value consists of a colour value, followed by an optional stop position (a percentage between 0% and 100%).
Open the Gradient Builder.
Find the Colour Stop gradient bar and set required colours.
The stop position is shown in percentages, for example 16% in the example.
To add a Colour Stop, click within the gradient bar where you want the new Colour Stop to be placed.
To adjust the position (percentage) of a Colour Stop on the gradient bar, drag the Colour Stop to the required position.
The Flip Colours function allows you to flip the colours used to make up the gradient. This gives a mirror image of the original gradient.
Open the Gradient Builder modal.
Find the Flip Colours Icon.
Click to Flip.
The Cwicly Gradient Builder allows you to save your custom gradients and make them global.
Global GradientsTo add a custom gradient global, click the "+" icon.
The new Global Gradient will be visible as a chip next to the "+" sign.
Gradients that you have saved as Global Gradients can be customised from the Gradients tab of the Colours tab of the Cwicly Global Styles tab.
Global Gradients
