CSS mask-size property

Last Updated : 01 Oct, 2020

CSS mask-size property sets the size of mask image on the mask painting area.

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

<!DOCTYPE html>
<html>
  
    <head>
        <style>
            .Container{
                width:25%;
                height:200px;
                box-sizing:border-box;
                border:1px solid green;    
            }
            .geeks{
                width: 60%;
                height:200px;
                background: green;
                -webkit-mask-image: 
                url("image.svg");
                -webkit-mask-repeat:no-repeat;
                mask-size: cover;            
            }
  
        </style>
    </head>
<body>
  
    <div class="Container">
        <div class="geeks"></div>
    </div>
  
</body>
  
</html>

Output:

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

<!DOCTYPE html>
<html>
  
    <head>
        <style>
            .Container{
                width:25%;
                height:200px;
                box-sizing:border-box;
                border:1px solid green;    
            }
            .geeks{
                width: 60%;
                height:200px;
                background: green;
                -webkit-mask-image: 
                url("image.svg");
                -webkit-mask-repeat:no-repeat;
                mask-size: 40% 80%;            
            }
  
        </style>
    </head>
<body>
  
    <div class="Container">
        <div class="geeks"></div>
    </div>
  
</body>
  
</html>

Output:

Browsers Supported:

Chrome
Firefox
Safari
Opera
Edge
Internet Explorer (Not Supported)

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

Related Articles