mask-origin
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;
}Quick facts
Initial value
border-boxInherited
No
Applies to
all elements and SVG container elements
Animation type
discrete
mask-origin Browser Support
Widely availableSince 202388% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
120+
53+
15.4+
120+