-webkit-mask-image

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-image CSS property sets the mask image for an element. A mask image clips the visible portion of an element according to the mask image's transparency.

Initial value	`none`
Applies to	all elements
Inherited	no
Media	visual
Computed value	absolute URI or `none`
Animatable	no
Canonical order	order of appearance in the formal grammar of the values

Syntax

-webkit-mask-image: url(images/mymask.png);
-webkit-mask-image: url(images/foo.png), url(images/bar.png);
-webkit-mask-image: none;

Values

<uri>: The location of the image resource to be used as a mask image.
<gradient>: A -webkit-gradient function to be used as a mask image.
none: Used to specify that an element is to have no mask image.

Formal syntax

<mask-image>[, <mask-image>]*

Examples

body {
  -webkit-mask-image: url('images/mymask.png');
}

div {
  -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
}

p {
  -webkit-mask-image: none;
}

If you specify multiple mask images, the resulting visible region is the combination of the visible regions of each individual mask.

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	No support	1.0	No support	No support	4.0
Multiple mask images	No support	1.0	No support	No support	4.0
Gradients	No support	1.0-webkit	No support	No support	4.0-webkit
SVG masks	No support	8.0^[1]	No support	No support	4.0

Feature	iOS Safari	Opera Mini	Opera Mobile	Android Browser
Basic support	3.2	No support	No support	2.1
Multiple mask images	(Yes)	No support	No support	(Yes)
Gradients	(Yes)-webkit	No support	No support	(Yes)-webkit
SVG masks	(Yes)	No support	No support	(Yes)

[1] Since Version 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0) Gecko supports SVG filter effects, which you can use to apply masks to HTML content.