How to Create a Parallax Image Background with a Blended Gradient Overlay in Divi

Posted on August 2, 2022 by in Divi Resources 3 Comments

How to Create a Parallax Image Background with a Blended Gradient Overlay in Divi
Blog / Divi Resources / How to Create a Parallax Image Background with a Blended Gradient Overlay in Divi

In earlier versions of Divi, adding a gradient overlay to a parallax background image was not a built-in option. But, with Divi’s new background options (and the Gradient Builder), you can easily create beautiful parallax backgrounds with countless gradient overlay designs.

In this tutorial, we are going to show you how to use Divi’s background options to add a colorful gradient overlay that blends with a background image using both True and CSS Parallax methods.

Sneak Peek

Here is a quick look at the background designs we’ll build in this tutorial.

This first one has a gradient overlay with the Color blend mode used on the background image using the True Parallax method.

And here is the same design using the CSS Parallax Method. Notice that the gradient remains fixed/attached to the background image so that it appears to be a part of the actual image and not just a layer.

And here is an example of a gradient overlay using semi-transparent color stops without a blend mode.

The Concept

The basic idea of this design involves two steps:

1. Create a background gradient for a section using the gradient builder making sure to place the gradient above the background image.

2. Add a background image to the same section that uses one of the parallax methods and the Color blend mode.

This will allow the colorful gradient to overlay the parallax image while it moves when scrolling down the page. The Color blend mode merges the gradient overlay with the image for a beautiful image that looks great with parallax.

Download the Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain
access to the download you will need to subscribe to our newsletter by using the form below. As a new
subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the
list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

To import the section layout to your Divi Library, do the following:

  1. Navigate to the Divi Library.
  2. Click the Import button at the top of the page.
  3. In the portability popup, select the import tab
  4. Choose the download file from your computer (make sure to unzip the file first and use the JSON file).
  5. Then click the import button.

divi notification box

Once done, the section layout will be available in the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  3. Choose the option “Build From Scratch”.
  4. Now have a blank canvas to start designing in Divi!

divi background masks and patterns hero section

How to Create a Parallax Image Background with a Blended Gradient Overlay in Divi

1. Create the Fill-in Row and Heading Text

Although we are going to be focusing on the section background design for this tutorial, it makes sense to add a fill-in row and heading to get a better feel for what the design will look like in a normal use case.

To start things off, add a one-column row to the existing section in the builder.

Parallax Image Background with a Blended Gradient Overlay in Divi

Next, add a text module to the row/column.

Parallax Image Background with a Blended Gradient Overlay in Divi

Text Settings

Open the settings for the Text Module. Under the Content tab, add an H2 heading to the body content.

<h2>Say Hello to Divi</h2>

Under, the design tab, update the heading options and max width as follows:

  • Heading 2 Font: Inter
  • Heading 2 Font Weight: Bold
  • Heading 2 Text Color: #fff
  • Heading 2 Text Size: 8vw
  • Heading 2 Line Height: 1.2em
  • Heading 2 Text Shadow: see screenshot
  • Headding 2 Text Shadow Blur Strength: 0.28em
  • Heading 2 Text Shadow Color: #10076d
  • Max Width: 50%

Parallax Image Background with a Blended Gradient Overlay in Divi

Row Settings

Now that the heading is in place, let’s update the row size and spacing to make it more responsive.

Open the row settings. Under the Design tab, update the following:

  • Width: 100%
  • Max Width: 80vw

Parallax Image Background with a Blended Gradient Overlay in Divi

  • Padding: 15vw top, 15vw bottom

Parallax Image Background with a Blended Gradient Overlay in Divi

2. Design the Gradient Background for the Section

Now that the fill-in content is complete, we are ready to start designing our section gradient background.

Background Gradient Settings

Open the settings for the section. Under the Content tab, select the gradient tab under the background options and update the gradient options as follows:

  • Gradient Stop 1: #0094ff (at 0%)
  • Gradient Stop 2: #ff00c7 (at 25%)
  • Gradient Stop 3: #0094ff (at 50%)
  • Gradient Stop 4: #ff00c7 (at 75%)
  • Gradient Stop 5: #0094ff (at 100%)
  • Gradient Type: Circular
  • Gradient Position: Bottom Left
  • Place Gradient Above Background Image: YES

Parallax Image Background with a Blended Gradient Overlay in Divi

3. Add a Parallax Background Image with Color Blend Mode

Once the gradient design is complete, we are ready to add our parallax background image. Then we will apply the Color blend mode to blend the gradient design with the background image for a beautiful parallax background design.

Background Image Settings

While in the background options of the section, select the Background Image tab and upload a background image. The update the following:

  • Use Parallax Effect: YES
  • Parallax Method: True Parallax
  • Background Image Blend: Color

Parallax Image Background with a Blended Gradient Overlay in Divi

Why the Color Blend Mode?

The color blend mode blends a grayscale version of the image with the colors (hue and saturation) of the gradient. This preserves the visual quality of the image with a whole new color scheme.

4. Add a Background Mask (Why Not?)

To finish off the design, let’s add a background mask that will sit behind our heading to make the text pop a little more and emphasize the parallax effect.

Background Mask Settings

While in the background options of the section, select the Background Mask tab and update the following:

  • Mask: Blades
  • Mask Transform: Flip Horizontal, Invert
  • Mask Size: Custom Size
  • Mask Width: 72vw
  • Mask Position: Top Right

Parallax Image Background with a Blended Gradient Overlay in Divi

5. Add Some Temporary Scrolling Space for Testing

Before we check out the final results, we need to add some space above and below our section so that we have sufficient scrolling space to see the parallax effect in action. To do this, simply add the following margin to the section:

  • Margin: 80vh top, 80vh bottom

Parallax Image Background with a Blended Gradient Overlay in Divi

Don’t forget to remove this spacing when adding the section to your own page.

Final Results

Let’s take a look at the final result on a live page.

And here is the same design using the CSS Parallax Method. Notice that the gradient remains fixed/attached to the background image so that it appears to be a part of the actual image and not just a layer.

Using a Gradient Overlay without the Blend Mode

Although I love the blend mode for this design, you may feel the need for a more traditional gradient overlay for your parallax background image.

For example, you could choose not to add a blend mode to the design and simply give each of the gradient color stops a semi-transparent color. This would allow you to see a more subtle representation of the background image behind the gradient overlay.

To do this you could bring down the opacity of each color to something like 72% and then set the background image blend option back to Normal.

Parallax Image Background with a Blended Gradient Overlay in Divi

Here is an example of what this would look like.

Try More Gradients!

divi background design with two layers of gradients masks and patterns

The Gradient Builder can create so many more colors and gradient types you can use to make these layered background designs stand out. You can check out our live demos of more background gradient design possibilities.

Final Thoughts

Creating a parallax background design with a blended gradient overlay can easily be done using Divi’s built-in background options. It really does give you the power of Photoshop in Divi like never before. Feel free to explore different color combinations with countless gradient color stops and positions. Plus, you can experiment with different blend modes as well.

Hopefully, this will come in handy for your own website or your next project.

I look forward to hearing from you in the comments.

Cheers!

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Divi Plugin Highlight: WP and Divi Icons Pro

Divi Plugin Highlight: WP and Divi Icons Pro

Posted on November 20, 2022 in Divi Resources

WP and Divi Icons Pro is a third-party plugin that adds over 3900 icons with 11 different styles to the Divi Builder. Icons include Font Awesome, Material Design, and custom icons. You can also upload your own and use them with all the others. In this post, we’ll take a close look at WP and Divi...

View Full Post
Divi Plugin Highlight: Divi Shop Builder

Divi Plugin Highlight: Divi Shop Builder

Posted on November 19, 2022 in Divi Resources

The Divi Shop Builder adds 14 new modules to the Divi Builder that allow you to customize the design of default WooCommerce pages with Divi. The plugin also comes with some premade shop layouts to give you a jump start on customizing your site. If you run an online store using WooCommerce and want...

View Full Post

3 Comments

  1. Thank you for the great tutorial on creating a gradient background! I am always looking for ways to boost my webiste images and backgrounds so this will come in handy.

  2. Thanks for great idea

  3. Thank you for the great tutorial on creating a gradient background! I am always looking for ways to boost my website images and backgrounds

Join To Download Today