mask

The mask CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.

Initial value as each of the properties of the shorthand:mask-image: nonemask-mode: match-sourcemask-repeat: no-repeatmask-position: centermask-clip: border-boxmask-origin: border-boxmask-size: automask-composite: add
Applies to all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements

Syntax

  
mask: url(masks.svg#circle) repeat-x;
  

Values

Sets the mask image source. See mask-image.
Sets the masking mode of the mask image. See mask-mode.
Sets the position of the mask image. See mask-position.
Sets the size of the mask image. See mask-size.
Sets the repetition of the mask image. See mask-repeat.
If only one value is given, it sets both mask-origin and mask-clip. If two values are present, then the first sets mask-origin and the second sets mask-clip.
Sets the area that is affected by the mask image. See mask-clip.
Sets the compositing operation used on the current mask layer. See mask-composite.

Browser support

maskchrome1edge12firefox2ieopera15safari3.2

We use cookies to improve your experience. Learn more in our Privacy policy.

×