> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/cwicly/colour-picker/gradient-builder.md). # 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="/pages/hLrhzA3XcKBS72xvdCRq" %} [Global Gradients](/global-styles/global-styles/global-gradients.md) {% 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="/pages/hLrhzA3XcKBS72xvdCRq" %} [Global Gradients](/global-styles/global-styles/global-gradients.md) {% endcontent-ref %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.cwicly.com/cwicly/colour-picker/gradient-builder.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.