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-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 valuenone
Applies toall elements
Computed valueabsolute URI or none
Canonical orderorder of appearance in the formal grammar of the values


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


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

Formal syntax

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


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.

Browser compatibility

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.

See also

-webkit-mask, -webkit-mask-origin, -webkit-mask-attachment,-webkit-mask-image,-webkit-mask-composite,-webkit-mask-repeat

Document Tags and Contributors

 Last updated by: flying-sheep,