Is it Possible to Add a Shadow Gradient Overlay to Background Video?

[lecksus (Ryan Leckie)]

Hi all. I’ll breakdown my problem and question as follows:

PROBLEM & QUESTION:
First off, I’m a newbie when it comes to web design. So that’s my first issue. Secondly, I’m having trouble adding a black shadow gradient over top of my background hero video so that the text on top of it can pop-out more and be more easily visible. Is it possible to add a shadow gradient on top of the background video element? If not, are there any simple workarounds I can do to make this work?

Here’s a pic of my setup and background hero video. It also shows my attempt to add a gradient, as well, on the right side of the picture:

I’ll add a link to my site below so anyone can do some further deep-diving if you wish.

Thanks all!

---

Here is my site Read-Only:
https://preview.webflow.com/preview/rg-johnson-company-inc?utm_medium=preview_link&utm_source=designer&utm_content=rg-johnson-company-inc&preview=6c34483e1dedb54f66248ccbd251fea9&workflow=preview

[imtiazraqib]

Hey @lecksus, it is possible.

Add a new div element to your background video, i.e. the background video would be the parent and give it a class overlay. Your navigator will look as such:

Since your Background Video is set as position: relative already, set your overlay as position: absolute-full as shown:

After this, all you need to add is a color overlay which is found here:

Following these steps would yield this result:

Hope this helps!

[lecksus (Ryan Leckie)]

@imtiazraqib this is perfect. It worked! I didn’t realize you could add div blocks to background image elements. Thank you so much.

[imtiazraqib]

I am glad I was able to help , happy designing!