Skip to content
Related Articles

Related Articles

CSS mask-size property

View Discussion
Improve Article
Save Article
  • Last Updated : 04 Jul, 2022
View Discussion
Improve Article
Save Article

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

html




<!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

html




<!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 4
  • Firefox 53
  • Safari 15.4
  • Opera 15
  • Edge 79
  • Internet Explorer (Not Supported)

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!