-webkit-mask-origin

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.

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.

Initial value	`padding`
Applies to	all elements
Inherited	no
Media	visual
Computed value	as specified
Animatable	no
Canonical order	order of appearance in the formal grammar of the values

Syntax

[ 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;
}

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

-webkit-mask-origin

Syntax

Values

Examples

Browser compatibility

See also

Document Tags and Contributors