CSS mask-repeat property

Last Updated : 08 Jun, 2023

CSS mask-repeat sets how the mask images are placed after they have been sized and positioned. The mask image can be repeated along the vertical or horizontal or both axes or not repeated.

Syntax:

mask-repeat: One-values
/* Or */
mask-repeat: Two-values
/* Or */
mask-repeat: Multiple values
/* Or */
mask-repeat: Global values

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

One-values: This property value refers to the values defined with units like space, round, repeat, repeat-x, repeat-y, no-repeat, etc.
Two-values: This property value refers to the values defined with units like repeat space, round space, repeat , etc.
Multiple values: This property value refers to the values defined with units like space round, no-repeat, 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-repeat property using one-values:

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 40%;
            height: 80px;
            background: green;
            -webkit-mask-image:
                url("image.svg");
            mask-repeat: repeat-x;
        }
    </style>
</head>
 
<body>
    <div class="geeks"></div>
</body>
</html>

Output:

Example 2: Below example illustrates the mask-repeat property using two-values:

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 40%;
            height: 80px;
            background: green;
            -webkit-mask-image:
                url("image.svg");
            mask-repeat: space repeat;
        }
    </style>
</head>
 
<body>
 
    <div class="geeks"></div>
 
</body>
</html>