How to Create a Diagonal Shape Background in Top Header of Divi
In this quick, fun tutorial I show you how to create a Diagonal Background Shape in the Top Header of Divi. It’s a very simple, sleek way to add some life to your Divi header by giving your top header menu a different look. It’s also a great way to leave some room for an overlapping logo if you have a design that suites that look. And with this method, you can also create ANY look with CSS you want to go for! It’s not limited to this diagonal line design. We’re going to create this effect:
First things first, make sure you have a top menu created and enabled by checking the “Secondary Menu” button in Appearance > Menus. Then just add and tweak the code below to your liking!
Here’s the CSS I showed in the video:
#top-header { background-image: linear-gradient(150deg,rgba(255,255,255,0) 55%,#8dc63f 25%); }
Be sure to place this in the Divi Custom CSS area or ideally Child Theme Stylesheet. See tutorial below for more info on that.
Links mentioned in the video:
- My Inspect Element Tutorial
- Where to Put Your Custom CSS in Divi
- How to Create an Overlapping Logo in Divi
Sites shown in video:
Like this tutorial? You’ll love my CSS Course.
Use coupon code “CSS30” for $30 OFF at checkout!

Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
You’re the best Josh!!!
Too kind, Diana. Too kind!
Hi Josh. This is very cool. Thank you!!
When I scroll the page the top (secondary) menu takes on a slight shadow effect. How can I prevent or modify this effect?
Thanks for all your help with us newbies…
Thanks Thomas. You can hide that with this CSS:
This is one reason I created and highly recommend my Divi/CSS Course! If interested, use coupon code CSS30 for a discount 🙂 Would love to have you in the course as it’ll help you out with these type of customizations!
Hi Josh,
Thanks for all your great work.I love your tutorials and I this one is really good.
I want to ask that is there any way to give border bottom to only gradient area in top header so that half of the menu is differentiated even if top and main header has same backgrounds.
mmm honesty not sure. There may be a way to adjust the width size for a border bottom. Probably recommend checking w3 schools for that.
Hey Josh, do you know how I would apply this same effect to the main header instead of the secondary header?
You can just replace the ID with the #main-header ID and that should do it 🙂