Search code examples
cssreactjssvglinear-gradientsinline-styles

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

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 ?

Solution

  • Using SVG as Mask Image

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