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

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

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:

Hey @lecksus, it is :100: 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:
Screen Shot 2021-08-05 at 2.14.16 PM

Since your Background Video is set as position: relative already, set your overlay as position: absolute-full as shown:
Screen Shot 2021-08-05 at 2.15.28 PM

After this, all you need to add is a color overlay which is found here:
Screen Shot 2021-08-05 at 2.16.23 PM

Following these steps would yield this result:

Hope this helps!

1 Like

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

1 Like

I am glad I was able to help :grin:, happy designing! :grinning_face_with_smiling_eyes: :+1:

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.