mask-origin | CSS-Tricks

CSS Almanac → Properties → M → mask-origin

Mojtaba Seyedi on Oct 29, 2020 (Updated on May 10, 2021)

The mask-origin specifies the mask position area of a mask layer image. In other words, it defines where the origin of the mask layer image is, whether it’s the edge of the border, padding or content box.

.element {
  mask-image: url(star.svg);
  mask-origin: content-box;
}

For elements rendered as a single box, mask-origin specifies the mask positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) the property specifies which boxes box-decoration-break operates on to determine the mask positioning area.

This property works like the background-origin property, except it has different initial value and three additional values that apply to SVG elements.

In the following demo you can change the origin of the mask layer image. There is the same image underneath to show the effect of masking better and marking the border and padding areas:

Syntax

mask-origin: <geometry-box> = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

Initial value: border-box
Applies to: All elements. In SVG, it applies to container elements excluding the <defs> element, all graphics elements and the <use> element.
Inherited: no
Animation type: discrete

Values

/* Keywords */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;
 
/* Global values */
mask-origin: intial;
mask-origin: inherit;
mask-origin: unset;

Value definitions

content-box: The position is relative to the content box. The origin of the mask-image is positioned at the top-left corner of the content edge.
padding-box: The position is relative to the padding box. The origin of the mask image at 0 0 is positioned at the top-left corner of the padding edge, 100% 100% is the bottom-right corner.
border-box: The default value, which sets the position relative to the border box.
margin-box: The position is relative to 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 viewBox attribute is specified for the SVG viewport creating element then the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute.
initial: Applies the property’s default setting, which is border-box
inherit: Adopts the mask-origin value of the parent.
unset: Removes the current mask-origin from the element.

Using multiple values

This property can take a comma-separated list of values for mask origins, where each value is applied to a corresponding mask layer image specified in the mask-image property. In the following example, the first value specifies the origin of the first image, the second value specifies the origin of the second image, and so on.

.element {
  mask-image: url(image1.png), url(image2.png), url(image3.png);
  mask-origin: padding-box, border-box, content-box;
}

Notes

For SVG elements without associated CSS layout box, the values content-box, padding-box and border-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, which is border-box.

Demo

When we have the mask layer image repeated, the first instance is positioned at top-left corner of the specified positioning area, and then it is repeated starting from there according to the value of the mask-repeat property.

Change the value for mask-origin in the following demo to get a better idea of what is happening: