Gradients are a great way to add visual interest and depth to funnels. With our customizable gradients, you can easily create unique and eye-catching designs that fit your brand.
In this article, we'll go over the different types of gradients available and how to customize them.
Applying Gradients to Your Funnels
You can easily find this option under "Global Design Settings" in the editor. Just scroll down to the "Colors & Style" section, and click on the Background color.
By default, the background color is set to "Solid" and here is where you can change it to "Gradient". Doing this applies the gradient to your funnel.
When you pick the "Gradient" option, you always start off with a Linear gradient.
Much like with the solid color background and image background, the gradient background can also be applied to all of the pages of your funnel, or only to specific ones if you disable the "Use Global Design" option and go with a page design instead.
In order to add more colors to your gradient, you just need to click the plus (+) symbol. You can have a maximum of 5 colors in a gradient.
If you figure that you added too many colors, you can easily remove the one(s) you don't want by clicking on their respective bin icon.
Types of Gradients
There are three types of gradients that you can use for your funnels, and depending on which type you pick you will have different customization options.
Linear Gradient
A linear gradient is a progressive transition between two or more colors along a straight line.
Example of a simple 2 colored linear gradient.
When working with linear gradients, you'll have the following customization options:
Direction - Allows you to change the direction/angle of the gradient.
Stops - Lets you pick where one color ends and the other begins. This allows you to control how smoothly or abruptly one color transitions to another.
Radial
Radial gradients are a progressive transition between two or more colors that radiate from an origin. You can choose between an elliptical or circular shape.
Example of a radial gradient with elliptical shape.
Example of a radial gradient with circular shape.
Radial gradients have a few extra options when compared to linear ones:
Shape - Here you can pick between elliptical or circular.
Size - Defines the size of the gradient's radius.
Position - Allows you to change the position of the gradient's center point.
Stops - Lets you pick where one color ends and the other begins. This allows you to control how smoothly or abruptly one color transitions to another.
Conic
A conic gradient is a gradient with color transitions rotated around a center point (rather than radiating from the center, like a radial gradient).
Example of a conic gradient.
Conic gradients have the following customization options available:
Direction - Allows you to change the direction/angle of the gradient.
Position - Allows you to change the position of the gradient's center point.
Stops - Lets you pick where one color ends and the other begins. This allows you to control how smoothly or abruptly one color transitions to another.
