The mask-clip property determines the mask painting area, which determines the area of an element that is affected by a mask. The painted (visible) content of an element must be restricted to this area.
The mask-clip property can be used on an HTML element or an SVG element. Each of these elements has different values that apply to one and not to the other. See the Values section below for more information.
Trivia & Notes
The mask-clip property behaves and takes the same values as the background-clip property, except that the mask-clip property takes three additional values that apply to SVG elements. You can refer to the background-clip property entry for a more detailed view into clipping. The same concepts that apply there also apply to the mask-clip property.
Official Syntax
-
Syntax:
mask-clip: [ <geometry-box> | no-clip ]# /* where */ <geometry-box> = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box - Initial: border-box
- Applies To: All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements
- Animatable: no
Notes
The margin-box, border-box, padding-box, and content-box values are applicable to HTML elements that have a box model, and compute to fill-box when applied to an SVG element.
The fill-box, stroke-box, and view-box values are applicable to SVG elements, and compute to the initial value of mask-clip when used on HTML elements.
The hash tag (#) indicates that the property takes any number values. The list of mask-clip values is comma-separated.
When the mask-clip property takes a list of comma-separated values, each value is applied to a corresponding mask layer image specified in the mask-image property (first value for the first image, second value for the second image, and so on).
Values
- content-box
- The painted content (visible part of the element) is restricted to (clipped to) the content box.
- padding-box
- The painted padding (visible part of the element) is restricted to (clipped to) the padding box.
- border-box
- The painted border (visible part of the element) is restricted to (clipped to) the border box.
- margin-box
- The painted margin (visible part of the element) is restricted to (clipped to) the margin box.
- fill-box
- The painted margin (visible part of the element) is restricted to (clipped to) the object bounding box.
- stroke-box
- The painted margin (visible part of the element) is restricted to (clipped to) the stroke bounding box.
- view-box
-
Uses the nearest SVG viewport as reference box.
If a
viewBoxattribute is specified for the SVG viewport creating element, then the reference box is positioned at the origin of the coordinate system established by theviewBoxattribute, and The dimension of the reference box is set to the width and height values of theviewBoxattribute. - no-clip
- The painted (visible part of the element) content is not restricted (not clipped).
Notes
For SVG elements without associated CSS layout box, the values content-box, padding-box, border-box and margin-box compute to fill-box.
For elements with associated CSS layout box, the values fill-box, stroke-box and view-box compute to the initial value of mask-clip.
Examples
The following example sets the mask painting area of two mask layer images specified using the mask-image property:
.el {
mask-image: url(myMask.png), url(secondMask.png);
mask-clip: content-box, border-box;
}
See the next section for a live demo and visual example.
Live Demo
In the following demo, the following mask image is used:
The mask image is repeated. The element it is applied to has a white background, some text, and an image inside it. The element also has padding and a 10px border.
The applied value of mask-clip is padding-box. Try changing the value to content-box or border-box to see more of the element show through the mask.
This is how the element looks like when the content, padding, and border boxes are used as mask painting areas:
content-box value is used as a mask painting area, only parts of the element that lie within its content box can be visible through the mask, even if the mask extends beyond that box. When the padding-box is used, the content and any extra padding around it can be painted through the mask. When the border-box value is used, any borders on the element can show through the mask.
Keep in mind that if the mask is smaller than the content area, for example, then, even if you specify padding-box as a value, the padding won’t be visible through the mask because it does not extend enough to allow it to show through.
Browser Support
CSS Masks
Method of displaying part of an element, using a selected image as a mask
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 120
- 53
- No
- 106
- 15
Mobile / Tablet
- 15
- 131
- No
- 131
- 132
Notes
This module, as you can see in the support table above, hasn’t been fully implemented in all browsers, so you’re probably not going to be able to use all features even in browsers that have implemented certain properties (for the time being).
In the meantime, you can check out this open source feature support table by Alan Greenblatt on GitHub. The purpose of this table is to provide some insight into what the current state of affairs is with various browser implementations of CSS Clipping and Masking features.
