mask-origin | CSS CSS Properties

Defines the 'origin' or starting point of the mask position. It determines where the mask image is placed relative to the element's boxes.

Quick example

.masked-element {
  /* Bases the mask position on the padding box */
  mask-origin: padding-box;
}

Initial value

border-box

Inherited

Applies to

all elements and SVG container elements

Animation type

discrete

Newly available Since 2023 88% global usage

Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Works in all modern browsers. May need a fallback for older browsers.

120+

53+

15.4+

120+