CSS mask-origin Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The mask-origin property in CSS is used to define the origin of the mask image used on an element.

This property determines the positioning area for the mask image, similar to the background-origin property for background images.

It can be particularly useful when you want to control how the mask image is applied to an element's content box, padding box, or border box.

💡 Syntax

The syntax for the mask-origin property is as follows:

Syntax

Copied

element {
  mask-origin: value;
}

Here, value can be one of several keywords specifying the area to which the mask image is applied.

🎛️ Default Value

The default value of the mask-origin property is border-box. This means the mask image is positioned relative to the border box of the element by default.

🏠 Property Values

Value	Description
border-box	The mask image is positioned relative to the border box.
padding-box	The mask image is positioned relative to the padding box.
content-box	The mask image is positioned relative to the content box.

📄 Example

In this example, we will apply a mask image to an element and use the mask-origin property to specify the origin of the mask.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS mask-origin Example</title>
  <style>
    .masked-element {
      width: 300px;
      height: 200px;
      background-color: lightblue;
      mask-image: url('mask.png');
      mask-size: contain;
      mask-origin: padding-box;
    }
  </style>
</head>
<body>
  <h1>Masked Element with Custom Origin</h1>
  <div class="masked-element"></div>
</body>
</html>

In this example, the mask image will be positioned relative to the padding box of the element, rather than the default border box.

🖥️ Browser Compatibility

The mask-origin property is supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, and Edge. As with any CSS property, it's a good practice to test your implementation across different browsers to ensure consistent behavior.

🎉 Conclusion

The mask-origin property is a valuable tool for web developers looking to control the positioning of mask images in relation to an element's boxes.

By understanding and using this property, you can create more precise and visually appealing designs. Experiment with different values and see how they affect the appearance of your masked elements.