Masking is a technique that lets you display selected portions of an element or an image on the screen while hiding the rest. Web developers can use this technique in the browser via the mask property and the SVG mask element. These features allow you to display masking effects on images and other elements in the browser without using any kind of image editing software.
In this article, I’m going to show CSS and SVG masking capabilities in action, also making sure to include some info about current browser support issues.
At the time of writing, most code samples work only in WebKit browsers while SVG-based masks seem to enjoy wider browser support. Therefore, if you’d like to try out the examples, I recommend you use a WebKit browser like Chrome.
Masking on the Web
You can achieve masking effects on the web using clipping or masking.
Clipping involves laying a closed vector shape, like a circle or a polygon, on top of an image or an element. Any parts of the image behind the shape will be visible, while any parts outside the boundaries of the shape will be hidden. The shape’s boundary is called the clip path, and you create it using the clip-path property.
Masking is done using a PNG image, CSS gradient, or an SVG element to hide some parts of an image or other element on the page. You can accomplish this using the CSS mask property.
In this article, I will focus exclusively on masking with the CSS mask property and the SVG <mask> element.
The CSS mask Property
mask is the CSS shorthand property for a whole bunch of individual properties. Let’s take a closer look at some of them in more detail.
The mask-image Property
You can use the mask-image property to set the mask layer image of an element.
The value none is not the same as setting no value at all. On the contrary — it still counts as a transparent black image layer.
You can set mask-image to a URL value. This can be the path to a PNG image file, an SVG file, or a reference to an SVG <mask> element. You can set more than one mask image layer by adding a corresponding number of URL values separated by …….
Source: https://www.sitepoint.com/masking-in-the-browser-with-css-and-svg/