title: Mask property not working in Firefox
body: <p>The CSS mask is not working in Firefox, but the same CSS is working in Chrome. What do I need to change?</p>
  
  <p>This is what I am currently using:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.web-cam {
    width: 250px;
    height: 250px;
    border-radius: 125px;
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  }
  video {
    width: 500px;
    height: 500px;
    position: absolute;
    top: -125px;
    left: -125px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="web-cam"&gt;
    &lt;video autoplay="autoplay"&gt;
      &lt;source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /&gt;
      &lt;source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /&gt;
      &lt;source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" /&gt;
    &lt;/video&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Chrome Browser View</p>
  
  <p><img src="https://i.stack.imgur.com/MBZT5.jpg" alt="Chrome View"></p>
  
  <p>Firefox Browser View</p>
  
  <p><img src="https://i.stack.imgur.com/VFhFh.jpg" alt="Firefox View"></p>