Masking tells your browser which asset elements should be visible, and is very practical for creating attractive shapes and layouts. Masking can be realized in three ways: using SVG elements, a raster image or using CSS gradients.

The main aspect of SVG is that can be scaled or transformed without losing quality.

img {  mask-image: url("mask_image.png") linear-gradient(-45deg,                        rgba(255,0,0,0) 10%, rgba(255,0,0,1) 80%);  mask-image: url(#masking); /*reference to the element generated and defined in SVG code*/}