CSS mask-position property

Last Updated : 8 Jun, 2023

The mask-position property sets the mask images within the mask positioning area by using the percentage or keywords values. There are always two values of mask-position (horizontal offset and vertical offset). If only one value is specified then the other one is assumed to be 50% or center.

Syntax:

mask-position: Keyword values
/* Or */
mask-position: position values
/* Or */
mask-position: Multiple values
/* Or */
mask-position: 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 top, bottom, left, right, center, etc.
Position values: This property value refers to the values defined with units like x% y%, where x and y are some integer.
Multiple values: This property value refers to the values defined with units like top right, 2rem 2rem, center, 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-position property using position-values

Output:

👁 Image

Example 2: Below example illustrates the mask-position property using keyword-values

Output:

👁 Image

Browsers Supported: