CSS Reference Property

mask-clip

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 viewBox attribute is specified for the SVG viewport creating element, then the reference box is positioned at the origin of the coordinate system established by the viewBox attribute, and The dimension of the reference box is set to the width and height values of the viewBox attribute.

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:

mask-image

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.

View this demo on the Codrops Playground

This is how the element looks like when the content, padding, and border boxes are used as mask painting areas:

mask-clip-example
When the 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 Support

Method of displaying part of an element, using a selected image as a mask

Current Status: W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 4*
  • 3.5
  • No
  • 15*
  • 4*

Mobile / Tablet

  • 3.2*
  • 2.1*
  • 37*
  • 56*
  • 51

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

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.

Further Reading

Written by

Last updated December 11, 2016 at 10:37 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.