How to Create Multi-Color Gradient Background in Divi

When creating a page or custom theme template in Divi, you can add a gradient background to a section, row, column, to module. In Divi version 4.15 or the older versions, you could only use the maximum of two-color combination for the gradient. Since version 4.16, you can use multiple combination of colors. You can use three colors or more. Also, there are more setting options to control the gradient style.

Not only you can apply the gradient to a background of a section, row, or column but you can also apply it to any element that supports gradient, including the Button module and the button of the Email Optin module, the button of the Call To Action module, and so on.

How to Create Multi-Color Gradient Background in Divi

First, login to your WordPress dashboard and edit an existing page with Divi Builder (or create a new one). Once the Divi Builder editor opens, select an element you want to add the gradient background to (e.g., a row) and click the gear icon to open the settings panel.

On the settings panel, open the Background block under the Content tab. Click the Gradient option to add the gradient background.

You can click the plus icon to select the colors of the gradient. As you can see, there is a new setting item called Gradient Stops that appears after you click the plus icon. You can use this setting option to define the colors you want to use on the gradient. By default, the gradient already contains two colors. To change the default color, simply click the dot and select the color you want from the color picker.

To add another color, you can hover your cursor over the line between the colors that have been added (the dots) and click the plus icon. This will add another dot. Simply click the dot to specify the color.

You can repeat the steps above to add more colors. You can add as many colors as you want for your gradient.

Once done adding the colors, you can open other setting options to style up the gradient. You can open the Gradient Type option to change the gradient type (linear, circular, elliptical, conical). To set the gradient direction, you can set the value on the Gradient Direction option. And so on.

The Bottom Line

In the last two releases, Divi has introduced new features to further decorate a background. Before advanced gradient, Divi has also introduced background pattern and background mask in the 4.15.0 release. With these features, you have more options to decorate the background or section, row, column, or module. Multi-color gradient can also be applied to a button.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.