How to Create Multi-Color Gradient Background in Divi

Updated: April 4, 2022

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 WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Divi.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.