<p><img src="https://hacks.mozilla.org/files/2017/06/omega.jpg" height="300"></p>

<p>This demo works on Firefox.</p>

<svg width="0" height="0">
   <defs>
     <linearGradient id="linear-grad">
        <stop stop-color="#000" opacity="1" offset="0%"/>
        <stop stop-color="#fff" opacity="1" offset="100%"/>
     </linearGradient>
     
    <mask id="grad-mask">
      <circle cx="185" cy="150" r="150" fill="url(#linear-grad)"/>
    </mask>
</svg> 

img {
  mask: url(#grad-mask);
  margin: 0 auto;
  display: block;
}

body {
  text-align: center;
}