add multiple webkit-gradient for every side

Question

So i have this css code:

img {
-webkit-mask-image: -webkit-gradient(linear, left 65%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
}

It makes the bottom of my img fade in the background, with transparency. However, i want to do this on each side. Is there a way to do that

Thanks for your help

Answer 1

I think this only works in Chrome and perhaps Safari, but you can do something like the following:

img{
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0))), -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,1)));
  -webkit-mask-composite: source-out;
}

This uses two (comma-separated) gradients that have multiple color-stop()s instead of just from() and to(). I don't exactly know why it works that the combination of -webkit-mask-composite: source-out with the second gradient using opposite opacity values in the 2nd gradient. I just happened to notice that it does while playing with different values of -webkit-mask-composite.

Here is a fiddle