1. css
  2. /properties
  3. /mask-image

mask-image

Definition

The mask-image CSS property sets the image or SVG element that will be used as a mask for an element. A mask is used to selectively show or hide parts of an element based on the opacity values of the mask image.

Examples

In this example, a div element is given a mask image that is a PNG file named "mask.png". The mask image is positioned at the top left corner of the element:

div {
  mask-image: url("mask.png");
  mask-position: top left;
}

In this example, a div element is given a mask image that is a linear gradient. The gradient starts with a transparent color at the top and gradually becomes opaque towards the bottom:

div {
  mask-image: linear-gradient(to bottom, transparent, black);
}

In this example, a div element is given an SVG mask image that consists of a circle shape. The circle shape is positioned at the center of the element and has a radial gradient that transitions from transparent to opaque:

div {
  mask-image: url("mask.svg#my-mask");
  mask-position: center;
  mask-size: contain;
}

Values

ValueDescription
noneNo mask is applied to the element.
<image>Specifies an image file that is used as the mask. This can be a URL, a data URI, or a linear or radial gradient.
url()Specifies the location of the image file that is used as the mask.
<svg>Specifies an SVG element that is used as the mask.
element(#id)Specifies an SVG element that is referenced by its ID attribute and used as the mask.
mask-box-imageSpecifies an image that is used to create a mask border around an element. This can be a URL, a data URI, or a gradient.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Best Practices

  • Use masks sparingly and only when necessary, as they can impact the performance of the website.
  • Use SVG masks for complex shapes and vector graphics, as they offer more flexibility and scalability than raster images.
  • Optimize mask images for faster loading times by compressing them and reducing their file size.
  • Experiment with different blend modes and opacity values for the mask image to achieve the desired effect.
  • Test the mask image in different browsers and devices to ensure that it is rendering correctly and consistently.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes