The CSS mask-origin property determines the positioning reference of a CSS mask image applied to an element using mask-image. It defines where the mask image originates within the element's box model, influencing how the mask is positioned and clipped.
Syntax:
mask-origin: Keyword values
/* Or */
mask-origin: Multiple values
/* Or */
mask-origin: Non-standard keyword values
/* Or */
mask-origin: Global valuesProperty values: This property accepts the values mentioned above and described below:
| Category | Description |
|---|---|
| Keyword values | Values like content-box, padding-box, margin-box, border-box, fill-box, stroke-box, view-box, etc. |
| Non-standard keyword values | Values like padding, border, content, etc. |
| Multiple values | Combinations like padding-box, fill-box, view-box, border-box, etc. |
| Global values | Values like inherit, unset, initial, etc. |
Example 1: Below is the example that illustrates the mask-origin property using border-box :
<!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 :
<!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: