Open In App

CSS mask-size property

Improve
Improve
Like Article
Like
Save
Share
Report

CSS mask-size property sets the size of the mask image on the mask painting area. The mask-size property in CSS is used to specify the size of the mask image applied to an element using CSS masking. It determines the width and height of the mask image, allowing for precise control over its dimensions

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)


Last Updated : 08 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads