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


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


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


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