How to set gradient color for a SVG element as background image?

Question

Hello I'm trying to set gradient color for a SVG element as background image in React

style={{ background: `linear-gradient(to bottom, red, yellow), url(${Background})`, backgroundSize: 'cover'}}

but it applies SVG and linear gradient separately

How can I make the gradient applies to the SVG background ?

Answer 1

Using SVG as Mask Image

style={{ background: `linear-gradient(to bottom, red, yellow)`, webkitMaskImage: `url(${Background})`, backgroundSize: 'cover'}}

Answer 2

You can edit the SVG properties to achieve the desired result. SVG provides different inline gradient types. Please check the link: https://www.w3schools.com/graphics/svg_grad_linear.asp