CSS mask-size property

Last Updated : 8 Jun, 2023

CSS mask-size property sets the size of the mask image on the mask painting area. The mask-size property in CSS is used to specify the size of the mask image applied to an element using CSS masking. It determines the width and height of the mask image, allowing for precise control over its dimensions

Syntax:

mask-size: Keyword values
/* Or */
mask-size: One-values
/* Or */
mask-size: Two-values
/* Or */
mask-size: Multiple-values
/* Or */
mask-size: Global values

Property values: This property accepts values mentioned above and described below:

Keyword values: This property value refers to the values defined with units like cover, contain, etc.
One-values: This property value refers to the values defined with units like %, em, px, etc. Height is set to auto. Its Basic Syntax is mask-size: width of the image;
Two-values: This property value refers to the values defined with units like %, em, px, etc. Height is set to auto. Its Basic Syntax is mask-size: width of the image height of the image;
Multiple values: This property value refers to the values defined with units like %, px, em, auto, etc.
Global values: This property value refers to the values defined with units like inherit, initial, unset, etc.

Example 1: Below example illustrates the mask-size property using One-values

Output:

👁 Image

Example 2: Below example illustrates the mask-size property using Two-values

Output:

👁 Image

Browsers Supported: