Widely Available
Clipping, shapes, and masking
id: masks
Masks
The
mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.
Baseline Status:
Achieved Widely Available on Jun 7, 2026 (Cross-browser Newly Available since Dec 7, 2023).
Desktop Browser Engine Support
Google Chrome
120
Supported
Mozilla Firefox
53
Supported
Apple Safari
15.4
Supported
Microsoft Edge
120
Supported
Mobile Browser Engine Support
Chrome Android
120
Firefox Android
53
Safari iOS
15.4
Specifications and References
MDN Browser Compat Data Keys:
css.properties.mask ↗
css.properties.mask-clip ↗
css.properties.mask-clip.border ↗
css.properties.mask-clip.content ↗
css.properties.mask-clip.padding ↗
css.properties.mask-clip.text ↗
css.properties.mask-composite ↗
css.properties.mask-composite.add ↗
css.properties.mask-composite.exclude ↗
css.properties.mask-composite.intersect ↗
css.properties.mask-composite.subtract ↗
css.properties.mask-image ↗
css.properties.mask-image.multiple_mask_images ↗
css.properties.mask-image.svg_masks ↗
css.properties.mask-mode ↗
css.properties.mask-mode.alpha ↗
css.properties.mask-mode.luminance ↗
css.properties.mask-mode.match-source ↗
css.properties.mask-origin ↗
css.properties.mask-origin.border ↗
css.properties.mask-origin.content ↗
css.properties.mask-origin.fill-box ↗
css.properties.mask-origin.padding ↗
css.properties.mask-origin.stroke-box ↗
css.properties.mask-origin.view-box ↗
css.properties.mask-position ↗
css.properties.mask-repeat ↗
css.properties.mask-size ↗