mask-image

The mask-image property designates an image to be used as a mask layer for the element to which it is assigned.

Syntax

Linear and radial CSS gradients can also be used for the mask image.

div.ex { 
  mask-image: url(path-to-image.jpg); 
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 80%; 
}

Values

none
Default value.

image
Specifies an image to use as the mask layer.

url
Specifies a URL to an image or an SVG <mask> element.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of mask-image? Submit a codepen.io demo and we'll showcase it here ↴