Open In App

CSS mask-origin property

Improve
Improve
Like Article
Like
Save
Share
Report

The mask-origin property sets the position of the mask image with respect to different components of the box model and The mask-origin property in CSS is used to specify the origin position of a CSS mask image applied to an element. It determines the starting point of the mask image within the element’s content box, allowing control over where the mask is positioned.

Syntax:

mask-origin: Keyword values
/* Or */
mask-origin: Multiple values
/* Or */
mask-origin: Non-standard keyword values
/* Or */
mask-origin: Global values

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

  • Keyword values: This property value refers to the values defined with units like content-box, padding-box, margin-box, border-box, fill-box, stroke-box, view-box, etc.
  • Non-standard keyword values: This property value refers to the values defined with units like padding, border, content, etc.
  • Multiple values: This property value refers to the values defined with units like padding-box, fill-box, view-box, border-box, etc.
  • Global values: This property value refers to the values defined with units like inherit, unset, initial, etc

Example 1: Below is the example that illustrates the mask-origin property using border-box :

html




<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 22%;
            height: 200px;
            background: green;
            border: 10px solid red;
            padding: 10px;
            color: white;
            -webkit-mask-image:
                url("image.svg");
            -webkit-mask-repeat: repeat;
            mask-origin: border-box;
        }
    </style>
</head>
 
<body>
 
    <div class="geeks"></div>
 
</body>
</html>


Output:

Example 2: Below is the example that illustrates the mask-origin property using content-box :

html




<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 22%;
            height: 200px;
            background: green;
            border: 10px solid red;
            padding: 10px;
            color: white;
            -webkit-mask-image:
                url("image.svg");
            -webkit-mask-repeat: repeat;
            mask-origin: content-box;
        }
    </style>
</head>
 
<body>
 
    <div class="geeks"></div>
 
</body>
</html>


Output:

Browsers Supported:

  • Chrome 1
  • Firefox 53
  • Safari 15.4
  • Edge 79
  • Opera 15
  • Internet Explorer (Not Supported).


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