How to create gradient overlays for readability

I have a slides layouter and a text in the middle of each slide, but the images behind are too bright.

I would like to create a dark gradient overlay, from 100% to 0% opacity, upon the images so that the text become clearer.

I have tried a gradient in Figma and export the PNG to my site but it did not seem to be an accurate solution, as the layouter is of course flexible so I don’t know what size should I export the gradient at, and if it’s even the best method to achieve what I seek.

Thank you.