[Resolved] Add gradient on top of video

[David]

Hello

I’ve had a video background to a header by following this…
https://docs.generatepress.com/article/page-hero-background-video/

And it’s working well…
http://79.170.40.35/meetdevon.org/

How can I add a white gradient over the top to get a similar effect to this…
https://ibb.co/9HF51bp

Thanks
Dave

[David]

Hi there,

maybe some CSS like this:

.page-hero:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 50%);
    z-index: 1;
}

handy site for creating the gradient background CSS:

https://cssgradient.io

[David]

Legend – thanks David!

I just had to add a z-index to bring it in front of the video.

Thanks for the CSS gradient link too 🙂

[David]

Glad to hear that – and thx for the z-index spot – updated code above in case others need it!

[Author]

Posts