CSS masking

Category: Graphics
Type: Chromium catches up
Status: Enabled by default (Chrome 120)
Intent stage: None

Summary

CSS mask, and related properties such as mask-image, mask-mode, etc, are used to hide an element (partially or fully) by masking or clipping the image at specific points. This feature unprefixes the -webkit-mask* properties and brings them up to spec. This includes mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, and mask-composite, as well as the "mask" shorthand. Local mask-image references are supported, serialization now matches the spec, and accepted values now match the spec (for example, "add" instead of "source-over" for mask-composite).

Standards & signals

Specification: https://drafts.fxtf.org/css-masking/#positioned-masks
Firefox: Shipped/Shipping — Firefox has nearly 100% pass rate on css-masking WPT tests.
Safari: Shipped/Shipping — Safari has shipped much of the unprefixing of these properties (https://bugs.webkit.org/show_bug.cgi?id=229082), as well as many implementation improvements, though some interop fixes are still in development.
Web developers: Strongly positive — This is part of interop-2023.
Tracking bug: https://crbug.com/1418401

Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

View on chromestatus.com