CSS masks have been fully supported by Firefox since 2017. Sadly other browsers are still behind. You can use CSS masks with chromium based browsers but you need to use the -webkit- prefix.

What are they?

Masks work much the same way they do in image editing programs like Photoshop. A mask applied to an image will hide some parts of the image. If the mask is made up of black and white the black parts of the mask will hide the image. This is a luminance mask. Any shades of grey will be partially transparent: the degree of transparancy is greater the darker the shade.

There are also alpha masks which are images that contain transparancy themselves. SVG and PNG files can contain transparancy whereas JPEGs cannot. In alpha mode the transparent sections hide the image and solid sections reveal.

Types of mask

Masks are made from images and the syntax is the same as for backgrounds. Instead of background-image use mask-image (and -webkit-mask-image) to apply the mask. So typically a mask will be a png or a jpeg. You can also use SVG masks on images but currently only Firefox supports that behaviour. Like backgrounds you can also use CSS gradients as masks too. Again like backgrounds you can use multiple masks on an element too, or tile the mask so it repeats.

The shorthand for masking is the mask property which combines the following:

Property	values
mask-image	mask-image: url(images/noise.png) or mask-image: radial-gradient(#fff, #000)
mask-clip	like background-clip.
mask-composite
mask-mode	can take alpha, luminence or match-source (FF only?)
mask-origin
mask-position
mask-repeat	repeat-X, repeat-y, no-repeat etc..
mask-size	cover, contain, 100% etc.. Just like background-size