Specify stops in gradient opacity (mask-image)

Question

From this question, I was able to get the code below to work.

However, it's not exactly like I want. I want it to fade out sooner. After some research, it looks like gradient (and webkit-gradient) have been replaced with linear-gradient. I tried to use that, but it doesn't seem to work with mask-image.

So, how can I make an image fade out with specific stops? For example 0 opacity at 0%, .25 opacity at 75%, .5 opacity at 100%. (In other words, you wouldn't see the red and blue stripes until 75% of the way down the image)

img {
  position: absolute;
  z-index: 5;
  top: 0; left: 0;
  -webkit-mask-image:
    -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(
        rgba(0,0,0,1)
      ), to(
        rgba(0,0,0,0)
      )
    )

}

#bg1 {
  position: absolute;
  left: 0; width: 50px;
  height: 360px;
  background-color: red;
}
#bg2 {
  position: absolute;
  left: 50px; width: 50px;
  height: 360px;
  background-color: blue;
}

<img src="http://www.gstatic.com/webp/gallery/1.jpg">
<div id="bg1"></div>
<div id="bg2"></div>

score 1 · Accepted Answer · answered Dec 07 '17 at 19:49

linear-gradient() will do

img {
  position: absolute;
  z-index: 5;
  top: 0; left: 0;
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.5) 75%, transparent);
  mask-image: linear-gradient(rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.5) 75%, transparent);
}

#bg1 {
  position: absolute;
  left: 0; width: 50px;
  height: 360px;
  background-color: red;
}
#bg2 {
  position: absolute;
  left: 50px; width: 50px;
  height: 360px;
  background-color: blue;
}

<img src="http://www.gstatic.com/webp/gallery/1.jpg">
<div id="bg1"></div>
<div id="bg2"></div>

Specify stops in gradient opacity (mask-image)

1 Answers1