CSS Masking

CSS masking allows you to create a mask layer to place over an element to partially or fully hide portions of the element.

The CSS mask-image property specifies a mask layer image.

The mask layer image can be a PNG image, an SVG image, a CSS gradient , or an SVG <mask> element .

To use a PNG image as the mask layer, use a url() value to pass in the mask layer image.

The mask image needs to have a transparent or semi-transparent area. Black indicates fully transparent.

Here is the mask image ("w3logo.png") we will use:

Here is an image from Cinque Terre, in Italy:

Now, we apply the mask image as the mask layer for the image from Cinque Terre, Italy:

The mask-image property specifies the image to be used as a mask layer for an element.

The mask-repeat property specifies if or how a mask image will be repeated. The no-repeat value indicates that the mask image will not be repeated (the mask image will only be shown once).

If we omit the mask-repeat property, the mask image will be repeated all over the image from Cinque Terre, Italy:

The mask-position property sets the starting position of a mask image (relative to the mask position area). By default, a mask image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Here, we position the mask image in center:

The following table lists all the CSS masking properties: