mask-size

The mask-size property designates the size of the mask layer image.

Syntax

The mask-size property works in conjunction with the mask-image property, which declares an image to be used as a mask layer for an element..

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

Values

auto
Default value.

size
Designates the size on the mask image in length untis (px, em, etc.) or in percentage.

contain
Scales the mask image so that both its width and height fit inside the container.

cover
Scales the mask image so that both its width and height cover the container.

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-size? Submit a codepen.io demo and we'll showcase it here ↴