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*/}