CSS masking

TheCSS masking module defines masking and clipping, two different graphical operations that are used to partially or fully hide portions of visual elements.

Clipping involves defining a closed vector path, shape, or polygon as aclipping path. Everything inside the clipping path region remains visible while everything outside is hidden, or "clipped out". Theclip-path property specifies a<basic-shape> or references an SVG<clipPath> element to be used as a clipping path.

CSSmasking properties are used to apply a mask to an element or its border. A graphical object is then painted onto the background or border, completely or partially masking out parts of the element or its border, depending on the opacity or luminance of the mask.

The image used as the mask is specified by themask-image ormask-border-source properties. The specified mask can be an<image>, a<gradient>, or an SVG<mask> element. The mask can be sized and positioned similarly tobackground and border images.

Clipping and masking in CSS behaves the same way as it does with SVG: First, the element is styled without filter effects, masking, clipping, and opacity. Then, any effects are applied to the element in the following order:filter effects, clipping, masking, and opacity.

While masking provides more control and options, clipping can perform better if a basic shape is all that's required — they are easier to interpolate.

<geometry-box>

Functions

rect() function

Interfaces

Guides

Introduction to CSS clipping: Introduction to clipping in CSS, including theclip-path property with examples.
Introduction to CSS masking: Introduction to masking in CSS, the various mask image types, and the effects of luminance and alpha-transparency in masking.
Declaring multiple masks: Introduction to mask layers and how to declare multiple mask images.
CSS mask properties: An exploration of CSS masking and themask shorthand component properties, with explanations and examples.