CSS masking

The CSS 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 a clipping path. Everything inside the clipping path region remains visible while everything outside is hidden, or "clipped out". The clip-path property specifies a <basic-shape> or references an SVG <clipPath> element to be used as a clipping path.

CSS masking 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 the mask-image or mask-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 to background 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.