We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

-webkit-mask-origin Redirect 1

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.


The -webkit-mask-origin CSS property determines the origin of a mask image. The value of the -webkit-mask-position property is interpreted relative to the value of this property. This property does not apply when -webkit-mask-attachment is fixed.


-webkit-mask-origin: [padding | border | content][, [border | padding | content]]*


Default value. The mask image position is relative to the padding. (For single boxes "0 0" is the upper left corner of the padding edge, "100% 100%" is the lower right corner.)
The mask image position is relative to the border.
The mask image is relative to the content.


.example {
    border: 10px double;
    padding: 10px;
    -webkit-mask-image: url('mask.png');

    /* The mask image will be inside the padding */
    -webkit-mask-origin: content;
div {
    -webkit-mask-image: url('mask1.png'), url('mask2.png');
    -webkit-mask-origin: padding, content;

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 Not supported Not supported Not supported 4.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 ? ? ? 3.2

See also

-webkit-mask, -webkit-mask-box-image, -webkit-mask-attachment,-webkit-mask-image,-webkit-mask-composite,-webkit-mask-repeat-webkit-mask-clip

Document Tags and Contributors

Last updated by: Sheppy,