Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

-webkit-mask-origin Redirect 1

Non-standard
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.

Summary

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.

Syntax

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

Values

 
padding
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.)
border
The mask image position is relative to the border.
content
The mask image is relative to the content.

Examples

.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

 Contributors to this page: Sheppy
 Last updated by: Sheppy,