How To Add Color and Gradient Overlay In Divi Video Background

Having a video background on your hero banner is one of the common norms of modern UI. Unfortunately, you can’t add an overlay unless if it’s an image background in Divi by default.

As always, I love to come up with a solution!

So in this tutorial, I’m going to show you how to add color and gradient overlays in Divi video background using two methods.

Before you jump in either of the methods below, make sure you copy these code. If you don’t want to use the gradient, you can remove this line of code background-image: linear-gradient( 142deg ,rgba(138,37,252,0.61) 0%,#26033f 100%)!important; and replace with the following code: background:red!important;opacity:50%!important;

content:"";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
142deg
,rgba(138,37,252,0.61) 0%,#26033f 100%)!important;
z-index: 1;

Method 1: Via Divi Video Module Method

Click the “blue” gear icon > Go to Advance tagb > Custom CSS > Paste the code above.

Check the scene in the video from 2:21 to 3:52 for more information

Method 2: Via Global Custom CSS Method

Basically, you need to declare a custom class name and add the CSS code in the Divi Theme Custom CSS option. Please watch the scene from 3:54 – 10:00 for more information. Code can be copy above this article.