How to Create Gradient Background Overlays With Divi's Background Settings

In today’s tutorial, we’re going to explore the new and elegant possibilities the new Divi background design features bring to your websites and more specifically; by using gradient background overlays.

With this new background update, a lot of new options have been added to the Divi builder which will help you meet your needs when designing a website of your own or for a client. These new options allow you to play around with the way your website looks and feels.

Before the release of this update, most of the changes–that can now be made within the Divi builder–had to be made through custom CSS code. Making design changes to your background has now become easier than ever. With a few simple clicks, you can create beautiful backgrounds for all the different sections of your website.

The Gradient Background Overlays Examples

We’ve created three sections with a before and after image that will show you how the new options can enhance the whole feeling your website reflects and give that certain “je ne sais quoi” factor to it.

The Hero Section

This is how the hero section looks like when adding a background image only:

And this is how our end result will look like when we’ve added the gradient background overlay to the same background image that is used in the image above:

The Blurb Section

This is how the blurb section looks like when using a one-color background:

And this is how the end result looks like when we’ve added the gradient background overlay to a pattern background:

The Pricing Section

This is how the pricing section looks like when we use one color (in a lighter and darker tone):

And this is how the end result will look like after using the gradient background overlay:

Each one of them has different settings and we’ll show you exactly–and step by step–how to create this look so you can use it on your own websites.

Step by Step: The Hero Section

For the first section of this post, we’re recreating a hero section. This example will reflect how the background design feature can change the colors that are being used in the image. And although we’ve used a gradient background overlay, the changes we made are very subtle. We added a sense of darker tone to the image in combination with a differently colored sky.

Start Creating

Let’s start by creating a new page on your WordPress website. Now, add a standard section to that page with a fullwidth row. Next, place the different modules in your row. We used two Text Modules and one Button Module.

First Text Module Settings

The first Text Module is where the title of your hero section will appear.Type down the text you want to appear in the content box within the Text subcategory of the Content tab and move on to the Design tab.

Within the Design tab, make the following modifications to the Text subcategory:

Text Orientation: Center
Text Font Size: 30
Text Font Color: #FFFFFF

Second Text Module Settings

Now, open the next Text Module and enter the text in the content box as well. Next, go to the Design tab and make the following modifications to the Text subcategory:

Text Orientation: Center
Text Font Size: 16
Text Font Color: #FFFFFF

Scroll down the same tab and add ‘500px’ to the Max Width in the Sizing subcategory and ‘2%’ to the Bottom Margin in the Spacing subcategory.

Button Settings

Last but not least, open the settings of the Button Module. Type down the CTA you want to link to your button in the Text subcategory of the Content tab and go to the Design tab.

Within the Design tab, make the following adjustments to the Button subcategory:

Use Custom Styles for Button: Yes
Button Text Size: 20
Button Text Color: #FFFFFF
Button Background Color: rgba(0,0,0,0)
Button Border Width: 2
Button Border Color: #FFFFFF
Button Border Radius: 7

Now, open the row sections and make the following adjustments in the spacing subcategory of the Design module:

Top Margin: 15%
Bottom Margin: 10%

Gradient Background Overlay Settings

Now we get to the fun part; adding the gradient background overlay to the background image. Go ahead and open the setting of the section. Next, go to the Background subcategory and start by adding the gradient background.

For the example we made, we used the following settings:

First Color: #3730ff
Second Color: #e02b20
Gradient Type: Linear
Gradient Direction: 272deg
Start Position: 40%
End Position: 100%

Now, go to the background image tab and add your image of choice. We deliberately chose an image that contains the sky to enhance the effect we’re trying to create.

Now, scroll down the same tab. Center the background image and activate the Multiply option in the Background image blend drop-down menu. You have a lot of other options as well that can help you reach the exact result you want.

And, there you have the final result:

Step by Step: The Blurb Section

The second example we’re going to show you how to create is the blurb section. We want to keep the focus on the content of the blurb, that’s why we didn’t opt for a busy background but a pattern background instead.

The background pattern used in this example comes from Toptal. You can download the patterns you like to use them for all kinds of purposes–including the commercial ones. Just don’t forget to credit them in the source of your website as told in their FAQ.

We also made the blurb icons slightly transparent to make the gradient colors come through. Although each one of the blurbs has the same settings, the color that comes through the icons is slightly different and in line with the gradient colors that we’ve used.