How can we add linear gradient to an image?

Question

I want an image with opacity = 1 at top and opacity = 0 at the bottom. Can anyone answer this question?

Answer 1

For dark background, use

background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)), url(image.jpg) no-repeat;
background-size: cover;

For white background, use

background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)), url(image.jpg) no-repeat;
background-size: cover;

Answer 2

In the same image, it is difficult, and many browers don't support it. My recommendation is editing the image in a image editing application, then uploading it into imgur, then copying it into your code.

From ten minutes of thinking and researching, that is the best way. You can easily change an image's opacity in a linear gradient fashion easily.

Hope this helps!!

Answer 3

That's what I was thinking. Like I said, probably best altering the picture rather than code. There IS a way to change it, but not easy.

Answer 4

Thank you for your effort to help me, but i want image's gradient to be transparent instead of any particular colour.

Answer 5

Here’s a full tutorial on CSS Graidents including how to use the linear-gradient property: https://youtu.be/TYHFe4L9bfo