These two features allow us to hide parts of an element in order to show a background image or color, or to give an element a special shape. Both terms can be a bit confusing, so let's see a brief description of each:
Clipping is done with vectors or paths since this CSS feature was taken from the SVG specification. It creates a solid edge between the element and its background.
Masking, on the other hand, uses images/bitmaps. With images, we can have "feathered" or blurred edges, whereas with clipping we have straight edges.
Let's check these properties out.
The mask CSS property is the shorthand for the mask-clip, mask-composite, mask-image, mask-mode, mask-origin, mask-position, mask-repeat, and mask-size properties. We'll see each of these in more detail later. The mask property looks like this:
mask: url(../images/mask.png) 50% 50% / contain no-repeat border-box;