Select Page

Gradient over Divi slides

by | Jan 25, 2017 | Pro Tip | 0 comments

Some time ago while building a Divi slider we thought of adding a gradient background over the slider arrows so it would stand out more. Our solution? We used the ::after pseudo element as a “ghost div” that works as a gradient overlay.


What we had:

Gradient before

What we wanted:

Gradient after

Here are the steps to achieve that:

1- In the Divi builder open the fullwidth slider settings

Divi builder

2- Open the setting of the first slide

Slider settings

3- Go to the Custom CSS Tab

Slider settings


Now we have a gradient overlay, but the text is below it – not very useful. Also, the button is unclickable! So, we’ll bring the slider content forward with good old z-index.

Slide Title:

Slide Description Container:

Slide Description:

Slide Button:

4- Repeat steps 2 and 3 for each slide.


You can replace the background property in ::after with any gradient you want! This simple gradient generator will help you.