Gradient Background

To apply a gradient background to your element:
– Double-click on it or right-click and choose edit to edit its options.
– In the element options panel go click the Styling tab.
– Choose Wrapper or Inner content horizontal accordion tab.
– Click Background
tab.
– By clicking the “Select background gradient” placeholder a default gradient color is created and applied to the element.

Gradient preview zone:
The gradient preview zone is the top area of the gradient generator (see picture below).
This shows a preview of the gradient we are creating.

Presets bar:
Upon hovering the preview area, the presets bar becomes visible.
You can click the Presets button to choose Local or Global gradient presets.
Delete a gradient by clicking the trash icon in the presets bar.

Local presets are presets which you define on specific elements.

Global Presets (PRO feature) are presets which you define in the Zion Builder admin panel.
By clicking on the trash icon you can delete the gradient.
Bellow the preview zone is the thumbnail of the gradient background and a “+” icon.
Clicking on the gradient thumbnail opens the gradient options:

Gradient layering area:

Here you can select, add, remove or sort gradients.
Add a gradient by clicking the plus icon.
Remove a gradient by clicking the “x” icon that appears when you hover a gradient color.
Sort gradients by clicking and dragging gradients to swap their positions.

Layering gradients
You can layer multiple gradients by making use of color opacity as shown in the gif below.
When you set a lower opacity of gradient colors, other gradient layers become visible.
Experiment with a different options on different gradient layers.

Make sure you add transparency when layering multiple gradients!


Gradient type:
Linear: Creates a linear background gradient.
Gradient angle: Sets the background-gradient angle in deg(degrees) units.
Radial: Creates a radial gradient.
Position X: Sets the X position of the gradient center.
Position Y: Sets the Y position of the gradient center.

Gradient bar:

It allows you to add or remove gradient colors as well as setting up the colors as well.

Add color by clicking anywhere on the gradient bar.
Remove a color by dragging the corresponding color dot outside of the Element options panel.

Colors list:
Bellow the gradient bar is a list of all colors inserted into the gradient.


This list is automatically updated whenever you create, remove or change the color options.
Change color by inserting a value into the color value input.
Open color picker by clicking the color thumbnail icon.
Change the color location by inserting a percentage color location value.
Delete a color from the “X” icon button.

Change color options:
Each color has a color value and a color location.

Color value can be changed from the color picker of that color or from the colors list.

Color location
Determines the position in the gradient where that color has it’s the fullest value and it is not affected by other colors in the gradient until it has opacity set below 1.

Open color picker by clicking the little dots in the gradient bar or the color thumbnail in the colors list.

Color picker saturation area:


Click or drag inside the top colored area of the color picker to intuitively choose a color saturation.

Color picker hue and opacity area:


Drag the two sliders to set color hue and opacity.

Color picker color mode area:

When you change a color in the color picker its value is dynamically represented in the bottom area of the color picker.
Here you can insert an exact value of the color and you can change the way the color is represented.
Click on the bordered zone to insert an exact value.
Use the two top and bottom arrows to select color mode.
Color modes: HEX, RGBA, HSLA.
Close the color picker by clicking anywhere outside the color picker area.

Was this article helpful ?

14 people consider this article helpful
Thank you! We will improve this article.

Didn’t find what you’re looking for? Please let us know

Submit a ticket