MasksBaseline · Widely available

The mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Dec 7, 2023. Widely available since Jun 7, 2026.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–119Not supported

120+Supportedsince Dec 5, 2023

Current: 155

Edge

12–119Not supported

120+Supportedsince Dec 7, 2023

Current: 154

Firefox

1–52Not supported

53+Supportedsince Apr 19, 2017

Current: 157

Safari

1–15.3Not supported

15.4+Supportedsince Mar 14, 2022

Current: 27

MobileChrome Android

18–119Not supported

120+Supportedsince Dec 5, 2023

Current: 155

Firefox Android

4–52Not supported

53+Supportedsince Apr 19, 2017

Current: 157

Safari iOS

1–15.3Not supported

15.4+Supportedsince Mar 14, 2022

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: mask.

Feature detection

CSS · check before using

@supports (mask: initial) {
  /* styles that rely on mask */
}

/* or in JavaScript */
if (CSS.supports("mask", "initial")) {
  // use it
}

Documentation (MDN)

Specification

drafts.csswg.org#positioned-masks ↗

Usage share

caniuse.com/css-masks ↗

Sub-features

Support for each part of the feature (28). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
mask	120	120	53	15.4	120	53	15.4
mask-clip	120	120	53	15.4	120	53	15.4
mask-clip.border	✕	✕	✕	15.4	✕	✕	15.4
mask-clip.content	✕	✕	✕	15.4	✕	✕	15.4
mask-clip.padding	✕	✕	✕	15.4	✕	✕	15.4
mask-clip.text	✕	✕	✕	15.4	✕	✕	15.4
mask-composite	120	120	53	15.4	120	53	15.4
mask-composite.add	120	120	53	15.4	120	53	15.4
mask-composite.exclude	120	120	53	15.4	120	53	15.4
mask-composite.intersect	120	120	53	15.4	120	53	15.4
mask-composite.subtract	120	120	53	15.4	120	53	15.4
mask-image	120	120	53	15.4	120	53	15.4
mask-image.multiple_mask_images	120	120	53	15.4	120	53	15.4
mask-image.svg_masks	120	120	53	✕	120	53	✕
mask-mode	120	120	53	✕	120	53	✕
mask-mode.alpha	120	120	53	✕	120	53	✕
mask-mode.luminance	120	120	53	✕	120	53	✕
mask-mode.match-source	120	120	53	✕	120	53	✕
mask-origin	120	120	53	15.4	120	53	15.4
mask-origin.border	✕	✕	✕	15.4	✕	✕	15.4

Show 8 more

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
mask-origin.content	✕	✕	✕	15.4	✕	✕	15.4
mask-origin.fill-box	120	120	53	✕	120	53	✕
mask-origin.padding	✕	✕	✕	15.4	✕	✕	15.4
mask-origin.stroke-box	120	120	53	✕	120	53	✕
mask-origin.view-box	120	120	53	✕	120	53	✕
mask-position	120	120	53	15.4	120	53	15.4
mask-repeat	120	120	53	15.4	120	53	15.4
mask-size	120	120	53	15.4	120	53	15.4