# Gradient Builder
The Gradient Builder allows you to create simply and visually complex Gradients for your unique designs.
{% hint style="info" %}
The Gradient Builder is available for Background and Overlay.
{% endhint %}
{% embed url="" %}
## Open Gradient Builder
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.
## Linear Gradient
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.
### Modify
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.
## Radial Gradient
The Radial Gradient function creates an image consisting of a progressive transition between two or more colours that radiate from an origin.
### Modify
* 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.
## Conical Gradient
The Conical Gradient function creates an image consisting of a gradient with colour transitions rotated around a centre point.
### Modify
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.
## Copy Gradient
The Gradient you have created (Linear, Radial or Conical) can be copied by double clicking the input field.
## Gradient Information
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.
## Reset
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.
## Vivid Maker
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.
### Add
* Click the Vivid Maker icon to open the Vivid Colour modal as below.
### Colour System
* Choose the colour system you wish to apply.
### Precision
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.
### Beziier Interpolation
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.
### Apply Vivids
* To Apply Vivids, click the button as below.
### Reset Vivids
* To reset, click the "Reset to Previous" icon to the right of "Apply Vivids".
## Colour Stop
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.
### Add Colour Stop
* To add a Colour Stop, click within the gradient bar where you want the new Colour Stop to be placed.
### Adjust Colour Stop
* To adjust the position (percentage) of a Colour Stop on the gradient bar, drag the Colour Stop to the required position.
### Flip Colours
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.
## Global Gradient
The Cwicly Gradient Builder allows you to save your custom gradients and make them global.
{% content-ref url="../../global-styles/global-styles/global-gradients" %}
[global-gradients](https://docs.cwicly.com/global-styles/global-styles/global-gradients)
{% endcontent-ref %}
### Add
* To add a custom gradient global, click the "+" icon.
The new Global Gradient will be visible as a chip next to the "+" sign.
## Global Gradients
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.
{% content-ref url="../../global-styles/global-styles/global-gradients" %}
[global-gradients](https://docs.cwicly.com/global-styles/global-styles/global-gradients)
{% endcontent-ref %}
