Getting Started

You can add custom gradients on the background of any section, row, or column of your website. The default gradient color picker lets you choose two colors, while the Advanced Gradient Color picker lets you choose multiple colors and use various types of gradients. This article will cover how to add and use an Advanced Gradient Color picker with an example.

How to use Advanced Gradient

To use the Advanced Gradient color picker, follow the steps listed below:

- From your CMS Dashboard, go to Design and Pages
- On your website builder, click on any section, row, or column and open the editor modal
- Expand the Section/Row/Column Background accordion
- Select the Gradient tab
- Click on Add Custom Gradient
- Click on the Advanced tab
- Start adding an Advanced gradient

Global Gradients

From the global styles option on your website builder, you can create Global Gradients and save them to a library. You can access the saved gradient/gradients from the library whenever you are editing the background of any section, row, or column.

Follow the steps below to set Global Gradients:


- From your CMS Dashboard, go to Design and Pages
- Click on Global Styles on the left-hand side of your screen
- Open the Global Colors tab on your modal
- Expand the Global Gradients option
- Click on the + Add New Gradient button
- Click on the Square Gradient that pops up (This one is the default gradient)
- Start customizing the gradient

Using Advanced Gradient (example)

The video below demonstrates how Advanced Gradient works on your website builder:

Updated on: 29/01/2023