<svg width=0 height=0>
    <defs>
        <linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
          <stop stop-color="black" offset="0"/>
          <stop stop-color="white" offset="1"/>
        </linearGradient>        
        <mask id="masking2" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
            <rect y="0.3" width="1" height=".7" fill="url(#gradient)"></rect>
            <circle cx=".5" cy=".5" r=".35" fill="white"></circle>
        </mask>
    </defs>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="426">
    <image xlink:href="https://thypix.com/wp-content/uploads/2018/05/Sommerlandschaft-Bilder-55.jpg" width="600" height="426" mask="url(#masking2)"></image>
</svg>    



<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="426">
    <mask id="mask1">
        <ellipse cx="50%" cy="50%" rx="40%" ry="40%" fill="white" filter="url(#filter2)"></ellipse>
    </mask>
    <image xlink:href="https://thypix.com/wp-content/uploads/2018/05/Sommerlandschaft-Bilder-55.jpg" width="600" height="426" mask="url(#mask1)"></image>
</svg>

<svg width=0 height=0>
    <filter id="filter2">
        <feGaussianBlur stdDeviation="12"></feGaussianBlur>
    </filter>
</svg>


<!--why dont work mask css:-->

<!--<div>-->
<!--    <img src="https://thypix.com/wp-content/uploads/2018/05/Sommerlandschaft-Bilder-55.jpg">-->
<!--</div>-->