mask-clip

The mask-clip CSS property is part of the CSS Masking Module Level 1 specification, and sets the mask painting area. It literally clips the background area of an element and defines which areas show through the mask: border, padding or content box. It’s sort of like putting the frame on a photo, showing only the parts of the photo that aren’t covered by the frame. Only, in this case, we’re setting what gets clipped using CSS Box Model values.

.element {
  mask-image: url(sun.svg);
  mask-clip: padding-box;
}

This works like the background-clip property, except it has three additional values that apply to SVG elements. In the following demo you can change the mask painting area using this property. There is the same image underneath to show the effect of masking better and marking the border and padding areas:

Syntax

mask-clip: <geometry-box> = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip

• Initial value: border-box
• Applies to: all elements. In SVG, it applies to container elements excluding the <defs> element, all graphics elements.
• Inherited: no
• Animation type: discrete

Values

/* Keyword values */
mask-clip: border-box;
mask-clip: content-box;
mask-clip: fill-box;
mask-clip: margin-box;
mask-clip: padding-box;
mask-clip: stroke-box;
mask-clip: view-box;

/* No clip */
mask-clip: no-clip;

/* Global values */
mask-clip: intial;
mask-clip: inherit;
mask-clip: unset;

• border-box: The painted content is clipped to the border box. (Default value)
• content-box: The painted content is clipped to the content box.
• fill-box: The painted content is clipped to the object bounding box.
• margin-box: The painted content is clipped to the margin box.
• padding-box: The painted content is clipped to the padding box.
• stroke-box: The painted content is clipped to the stroke bounding box.
• view-box: Uses the nearest SVG viewport as reference box. If a viewBox attribute is specified for the SVG viewport creating element:
  • The reference box is positioned at the origin of the coordinate system established by the viewBox attribute.
  • The dimension of the reference box is set to the width and height values of the viewBox attribute.
    
• no-clip: The painted content is not clipped.
  
• initial: Applies the property’s default setting, which is border-box.
• inherit: Adopts the mask-clip value of the parent.
• unset: Removes the current mask-clip from the element.

Notes

• For SVG elements without associated CSS layout box, the values content-box, padding-box compute to fill-box and for border-box and margin-box compute to stroke-box.
• For elements with associated CSS layout box, the values fill-box compute to content-box and for stroke-box and view-box compute to the initial value of mask-clip which is border-box.

Using multiple values

This property can take a comma-separated list of values for mask clips and each value is applied to a corresponding mask layer image specified in the mask-image property. In the following example, the first value specifies the mask painting area of the first image, the second value specifies the mask painting area of the second image, and so on.

.element {
  mask-image: url(image1.png), url(image2.png), url(image3.png);
  mask-clip: padding-box, border-box, content-box;
}

Demo

Browser support

IE	Edge	Firefox	Chrome	Safari	Opera
No	79+	53+	All	4+	15+

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
All	All	All	All	59+

More information

Related properties