CSS mask-size

The mask-size CSS property specifies the size of the mask image used in a CSS mask. It can be used to control the size of the mask image relative to the element it is applied to.

The syntax for the mask-size property is:


mask-size: value;

Where value can be set using a length value, a percentage value, or the keyword values contain or cover.

When using length or percentage values, the mask image is scaled to match the given size. The contain keyword scales the mask image to be as large as possible while still ensuring that both its dimensions are greater than or equal to the corresponding dimensions of the masking box, and the cover keyword scales the mask image to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the masking box.

Result:

Below is an example of how the mask-size property can be used:

This text is masked with the image 'mask.png' using the contain value for mask-size.