I cannot insert a linear gradient in the black color

Question

I’m trying to make the linear gradient effect to leave the bottom of the image with black "gradient", but when I put the command, regardless of the color I use, it turns white, follows code for viewing:

        -webkit-mask-image: linear-gradient(to top, transparent 1%, #000000 30%);

The picture looks like this:

I would like the bottom to be black, to follow the flow of the section just below the image, but no matter what color I enter in the code (in case #000000), it always turns white

Answer 1

The estate -webkit-mask-image actually creates a gradient of opacity as you can see in this question With CSS it is possible to merge two Images?

So the white you’re seeing is actually the background color of the page.

One of the ways to fix this is to put the image inside a div with the background black for example.

body {background: red;}

img {
  -webkit-mask-image: linear-gradient(to top, transparent 1%, #000000 30%);
}

div {
  display: inline-block;
  background: black;
}

<img src="https://unsplash.it/200/200">

<div>
  <img src="https://unsplash.it/200/200">
</div>