CSS mask-position property

Last Updated : 08 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

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .Container {
            border: 3px solid black;
            background-color: rgb(136, 255, 0);
            width: 30%;
            height: 30vh;
        }

        .geeks {
            width: 30%;
            height: 200px;
            background: green;
            border: 10px solid red;
            -webkit-mask-image:
                url("image.svg");
            -webkit-mask-repeat: no-repeat;
            mask-position: 0.2rem 30%;
        }
    </style>
</head>

<body>
    <div class="Container">
        <div class="geeks"></div>
    </div>
</body>
</html>

Output:

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

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .Container {
            border: 3px solid black;
            background-color: rgb(136, 255, 0);
            width: 30%;
            height: 30vh;
        }

        .geeks {
            width: 30%;
            height: 200px;
            background: green;
            border: 10px solid red;
            -webkit-mask-image:
                url("image.svg");
            -webkit-mask-repeat: no-repeat;
            mask-position: top;
        }
    </style>
</head>

<body>

    <div class="Container">
        <div class="geeks"></div>
    </div>

</body>
</html>