CSS mask-origin Property

The CSS mask-origin property is a powerful tool that allows developers to manipulate the rendering of masks on HTML elements. This property is particularly useful when you want to control how a mask is applied to an element by specifying the positioning of the mask image relative to the box model of the element. In this article, we will explore what the mask-origin property is, how it works, and when to use it.

What is the CSS mask-origin Property?

The mask-origin property in CSS determines the positioning area for the mask when it is applied to an element. A mask is an image (or other content) that can be used to selectively hide parts of an element. By default, a mask is applied to the entire content box of the element, but the mask-origin property allows you to change that.

Browser Compatibility

Before using the mask-origin property, it’s essential to check its compatibility with various browsers. Here is a simple table summarizing the support:

Browser	Version	Support
Chrome	61+	✔️
Firefox	63+	✔️
Safari	12+	✔️
Edge	16+	✔️
Internet Explorer	Not Supported	❌

CSS Syntax

The syntax for using the mask-origin property is straightforward. Below is the basic syntax:

selector {
    mask-origin: value;
}

Values

The mask-origin property accepts three values: border-box, content-box, and padding-box. Let’s explore each of these values in detail.

“border-box”

When you use border-box as the value for mask-origin, the mask is applied to the entire element, including the borders. This means the mask image will cover the whole area of the element, including padding and borders.

.example-border-box {
    mask-origin: border-box;
    mask-image: url('mask-image.png');
}

“content-box”

Using content-box as a value confines the mask to the content area only, excluding any padding and borders. This is useful when you want the mask to only affect the inner content of the element.

.example-content-box {
    mask-origin: content-box;
    mask-image: url('mask-image.png');
}

“padding-box”

With padding-box, the mask will extend over the content and padding areas but will not cover the borders. This can give a unique visual effect by allowing the border to remain unaffected by the mask.

.example-padding-box {
    mask-origin: padding-box;
    mask-image: url('mask-image.png');
}

Initial Value

The initial value of the mask-origin property is border-box, which means that if you do not specify this property, the browser will apply the mask to the entire element, including the border areas by default.

Example

Here is a complete example that illustrates the use of the mask-origin property along with each of its values. The code below demonstrates how different mask origins can create varying effects on a single HTML element:

<style>
.container {
    width: 300px;
    height: 200px;
    margin: 20px;
    border: 5px solid black;
}
.example-border-box {
    mask-origin: border-box;
    mask-image: url('mask-image.png');
    background: yellow;
}
.example-content-box {
    mask-origin: content-box;
    mask-image: url('mask-image.png');
    background: red;
}
.example-padding-box {
    mask-origin: padding-box;
    mask-image: url('mask-image.png');
    background: green;
}
</style>

<div class="container">
    <div class="example-border-box">Border Box Mask</div>
    <div class="example-content-box">Content Box Mask</div>
    <div class="example-padding-box">Padding Box Mask</div>
</div>

Related CSS Properties

To fully utilize masking in CSS, it’s crucial to understand other related properties as well. Below are the properties associated with masks:

mask

The mask property is a shorthand property that allows you to set multiple mask-related values at once, including image, clip, and repeat.

mask-type

The mask-type property specifies whether the mask is a bitmap or a vector – affecting how it affects the content beneath it.

mask-image

The mask-image property defines the image to be used as a mask. This image determines what parts of the element are visible and which are hidden.

mask-repeat

The mask-repeat property specifies how the mask image should be repeated. This can create interesting visual effects depending on how the mask image is designed.

mask-position

The mask-position property sets the starting position of the mask image. This allows you to control where the mask appears in relation to the element.

mask-size

The mask-size property controls the size of the mask image. You can set it to specific dimensions or use keywords like cover and contain to scale it properly.

mask-composite

The mask-composite property determines how multiple masks are composited together, if multiple masks are applied to an element.

mask-clip

The mask-clip property allows you to control which portion of the mask image applies to the element.

mask-border

The mask-border property is used to specify properties related to the borders of the mask itself, allowing for further customization of masking effects.

FAQs

What is the purpose of the mask-origin property?

The mask-origin property is used to control the position of a mask image relative to the box model of an element, enabling selective visibility effects.

What are the possible values for mask-origin?

The possible values are border-box, content-box, and padding-box.

Is mask-origin supported in all browsers?

No, while it is supported in major browsers, it is not supported in Internet Explorer.

Can I use images for masking?

Yes, you can use images or gradients as masks via the mask-image property.

How can I create complex masking effects?

Complex masking effects can be achieved by combining the mask-origin property with other mask-related properties like mask-composite, mask-position, and mask-size.