mask-image and -webkit-mask-image not work in Firefox

Question


.lighting {
width: 100%;
height: 100%;
position: absolute;
z-index: 8;
opacity: 0.3;
-webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,1)));
mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,1)));
mix-blend-mode: screen;
pointer-events: none;
filter: blur(3px);
}

.sunMask {
position:absolute;
width:100%;
height:100%;
-webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
z-index: 4;
mix-blend-mode: screen;
animation-name: sunFocus;
}

This code does not work in Firefox more accurately with -web-web-mask-image and mask-image values. I haven't found a solution to this problem on the Internet, so I ask here. In Firefox console you can see only:

Error when processing values for "mask-image". Declaration abandoned. 
Error while processing values for "-webkit-mask-image". Declaration abandoned.

Syntax for writing gradients is wrong, `linear-gradient( angle, color,color,...color)` — Rainbow, Dec 24 '19 at 14:01
What other browsers exactly ? i ran your code in FF and chrome and nothing works — Rainbow, Dec 24 '19 at 14:25
https://igorkowalczyk.github.io/daycycle In Opera the mask-image is working... — Majonez.exe, Dec 24 '19 at 14:44

Temani Afif · Answer 1 · 2019-12-24T21:27:40.863

As commented you gradient syntax is wrong. If you check the specification of mask you will find this:

<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? ||<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>

Then

 <mask-reference> = none | <image> | <mask-source>

Then

<image> = <url> | <gradient>

Then

<gradient> =
<linear-gradient()> | <repeating-linear-gradient()> |
<radial-gradient()> | <repeating-radial-gradient()>

and finally

linear-gradient() = linear-gradient(
 [ <angle> | to <side-or-corner> ]? ,
 <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

Example:

.lighting {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-mask-image: linear-gradient(to left,transparent, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 60%,transparent);
  mask-image: linear-gradient(to left,transparent, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 60%,transparent);
  background:blue;
}

.sunMask {
  position: absolute;
  width: 100%;
  height: 100%;
 -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 60%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 60%);
  background:green;
}

body {
  background:red;
  margin:0;
}

<div class="lighting">

</div>

<div class="sunMask">

</div>

@MAJO it does for me but maybe the result isn't what you want which is a different story. I have removed more code to keep only the mask and show that the mask works fine. — Temani Afif, Dec 24 '19 at 21:28
@MAJO you know how mask should work? what is the effect of gradient inside maks? — Temani Afif, Dec 24 '19 at 22:18

mask-image and -webkit-mask-image not work in Firefox

1 Answers1