mask-origin

Avatar of Mojtaba Seyedi
Mojtaba Seyedi on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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:

Browser support

IEEdgeFirefoxChromeSafariOpera
No79+53+All4+15+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
AllAllAllAll59+
Source: caniuse