The mask-origin property specifies an element’s mask positioning area. That is, it specifies where the origin of the mask layer image (its upper left corner) will be inside the element, with respect to the element’s box.
More specifically, mask-origin defines which of the element’s boxes to use as the reference box for positioning the mask layer image.
If the element is rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages), the mask-origin property specifies which boxes box-decoration-break operates on to determine the mask positioning area.
The mask-origin property can be used on an HTML element or an SVG element. Each of these elements has different values that apply to one and not to the other. See the Values section below for more information.
If the mask layer image is repeated, its first “instance” is positioned so that tis top left corner lies at the top left corner of the specified reference box, and then it is repeated starting from there according to the value of the mask-repeat property. See the Live Demo section for a visual example and a live demo.
Trivia & Notes
The mask-origin property behaves and takes the same values as the background-origin property, except that the mask-origin property takes three additional values that apply to SVG elements. You can refer to the background-origin property entry for more insight. The same concepts that apply there also apply to the mask-origin property.
Official Syntax
-
Syntax:
mask-origin: <geometry-box># /* where */ <geometry-box> = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box - Initial: border-box
- Applies To: All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements
- Animatable: no
Notes
The margin-box, border-box, padding-box, and content-box values are applicable to HTML elements that have a box model, and compute to fill-box when applied to an SVG element.
The fill-box, stroke-box, and view-box values are applicable to SVG elements, and compute to the initial value of mask-clip when used on HTML elements.
The hash tag (#) indicates that the property takes any number values. The list of mask-origin values is comma-separated.
When the mask-origin property takes a list of comma-separated values, each value is applied to a corresponding mask layer image specified in the mask-image property (first value for the first image, second value for the second image, and so on).
Values
- content-box
-
The position is relative to the content box. The origin of the mask image at
0 0is positioned at the top left corner of the content box. - padding-box
-
The position is relative to the padding box. The origin of the mask image at
0 0is positioned at the top left corner of the padding box. - border-box
-
The position is relative to the border box. The origin of the mask image at
0 0is positioned at the top left corner of the border box. - margin-box
-
The position is relative to the margin box. The origin of the mask image at
0 0is positioned at the top left corner of the margin box. - fill-box
- The position is relative to the object bounding box.
- stroke-box
- The position is relative to the stroke bounding box.
- view-box
-
Uses the nearest SVG viewport as reference box.
If a
viewBoxattribute is specified for the SVG viewport creating element then the reference box is positioned at the origin of the coordinate system established by theviewBoxattribute, and the dimension of the reference box is set to the width and height values of theviewBoxattribute.
Notes
For SVG elements without associated CSS layout box, the values content-box, padding-box, border-box and margin-box compute to fill-box.
For elements with associated CSS layout box, the values fill-box, stroke-box and view-box compute to the initial value of mask-origin.
If mask-clip is padding-box, mask-origin is border-box, mask-position is top left (the initial value), and the element has a non-zero border, then the top and left of the mask layer image will be clipped.
Examples
The following example sets the mask positioning area of two mask layer images specified using the mask-image property:
.el {
mask-image: url(myMask.png), url(secondMask.png);
mask-origin: content-box, border-box;
}
See the next section for a live demo and visual example.
Live Demo
In the following demo, the following mask image is used:
The mask image is repeated. The element it is applied to has a white background, some text, and an image inside it. The element also has padding and a 20px border. The mask image is set to repeat. It starts at the top left corner of the mask positioning area.
The applied value of mask-origin is padding-box. Try changing the value to content-box or border-box to see more of the element show through the mask.
This is how the element looks like when the content, padding, and border boxes are used as mask positioning areas. The blue lines show where the top left corner of each box is:
content-box value is used as a mask positioning area, the mask image’s position starts at the top left corner of the content box. When the padding-box is used, the mask image’s position starts at the top left corner of the padding box. When the border-box value is used, the mask image’s position starts at the top left corner of the border-box.
Browser Support
CSS Masks
Method of displaying part of an element, using a selected image as a mask
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 120
- 53
- No
- 106
- 15
Mobile / Tablet
- 15
- 131
- No
- 131
- 132
Notes
This module, as you can see in the support table above, hasn’t been fully implemented in all browsers, so you’re probably not going to be able to use all features even in browsers that have implemented certain properties (for the time being).
In the meantime, you can check out this open source feature support table by Alan Greenblatt on GitHub. The purpose of this table is to provide some insight into what the current state of affairs is with various browser implementations of CSS Clipping and Masking features.
