mask-origin

The mask-origin property designates the origin position – the mask position area – of a mask layer image.

Syntax

Example:

div.ex { 
  mask-image: url(path-to-image.jpg); 
  mask-origin: content-box;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 80%; 
}

Values

border-box
Default value. The position of the mask layer image is relative to the border box.

content-box
The position of the mask layer image is relative to the content box.

padding-box
The position of the mask layer image is relative to the padding box.

margin-box
The position of the mask layer image is relative to the margin box.

fill-box
The position of the mask layer image is relative to the object bounding box.

stroke-box
The position of the mask layer image is relative to the stroke bounding box.

view-box
Uses the nearest SVG viewport as reference box.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of mask-origin? Submit a codepen.io demo and we'll showcase it here ↴