Gradient Overlay with Parallax Background
Enable a Gradient Overlay with a Parallax Background in Divi
Want to give your Divi section that sleek, layered look with a gradient overlay on a parallax background? 💥 You’ve come to the right place! Normally, Divi doesn’t make this combo easy—but we’ve got a quick CSS trick to make it happen directly in the section’s settings. Let’s dive in! 🚀
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #359f99 0%, #1d2a54 95%);
opacity: 0.9;
z-index: 2;
pointer-events: none;
Divi Mobile Menu
Step 01:
Add the CSS Directly to the Section
- In the Divi Builder, open the section where you want to create this effect.
- Head to the Advanced tab, then click on Custom CSS.
- In the Before field, paste the following CSS:
Step 03:
Set the Background Image and Enable Parallax
- Go to the section’s Background settings and open the Image tab.
- Select your background image, then turn on the Parallax option. ✨
Damm! You can also inspect below comment section for result!
Step 04:
Configure Your Gradient Overlay
- You can easily change the gradient in the code
- Choose your colors, set the direction, and adjust opacity to get the perfect overlay effect. 🎉
Pro Tip:
💡 This works by adding custom CSS to the section’s Before styling. If you’ve already got any custom styles in the Before box, you might want to double-check to avoid conflicts! 🧐
0 Comments