Маска градиента для Firefox

Question

Я использую -webkit-mask-image со значением свойства -webkit-gradient, который отлично работает в Chrome и Safari. Мне нужен тот же эффект для Firefox, я пытался использовать mask, но не смог добиться этого с помощью gradient. Можно ли использовать градиентную маску для Firefox?

JSFiddle

h1 { 
 
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(50%, rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 1))); 
 
}

<h1>I'M A GRADIENT MASK!</h1>

Answer 1

вы могли бы использовать псевдо элемент с фоновым градиентом

h1 { 
 
    position:relative; 
 
    } 
 
h1:before { 
 
    position:absolute; 
 
    top:0; 
 
    bottom:0; 
 
    right:0; 
 
    left:0; 
 
    content:''; 
 
    background:linear-gradient(to top, transparent ,rgba(255,255,255,0.8),transparent); 
 
    pointer-events:none; /* make sure it doesn't come in the way */ 
 
}

<h1>AM I A GRADIENT MASK?!</h1>