Search code examples
cssfirefoxmask

mask-image with linear-gradient on Firefox

The following snippet perfectly works on Chrome: the background image fades into to the background behind towards the bottom.

div {
  width: 200px;
  height: 200px;
  background-image: url("http://i.imgur.com/wcDxIZG.jpg");
  background-size: cover;
  background-position: center center;
  -webkit-mask-image: linear-gradient(black, black, transparent);
  mask-image: linear-gradient(black, black, transparent);
}
  <div></div>

But it doesn't work on Firefox, the value is said to be incorrect.

Why ? And how can I fix that ?

Note that I know how to use another div as overlay, which isn't a general solution to me as it has too many consequences on content and element position. The only answers I'm interested in are the ones which fix the background of the div.

Solution

  • Starting from Firefox 53 (released April 19, 2017) , this is now possible as the support of masking images has been completed.

    See http://caniuse.com/#search=mask