CSS mask-position Property

Posted in CSS Tutorial

Updated on Jul 27, 2024

By Mari Selvan

👁️ 9 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The mask-position property in CSS is used to define the position of a mask image within an element.

Masking allows you to hide or reveal specific parts of an element based on the transparency and position of the mask image.

This property is especially useful for creating complex shapes, patterns, and visual effects by positioning the mask precisely.

💡 Syntax

The syntax for the mask-position property is similar to that of the background-position property. It can accept values in different units, including percentages, pixels, and keywords.

Syntax

Copied

element {
  mask-position: x-position y-position;
}

x-position: Specifies the horizontal position of the mask image.
y-position: Specifies the vertical position of the mask image.

🎛️ Default Value

The default value of the mask-position property is 0% 0%, which places the mask image at the top-left corner of the element.

🏠 Property Values

Value	Description
length	Specifies the position using length units like px, em, etc.
percentage	Specifies the position as a percentage of the mask container's dimensions.
keywords	Predefined keywords like top, left, bottom, right, center.

📄 Example

In this example, we will position a mask image at the center of an element.

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-position Example</title>
  <style>
    .masked {
      width: 300px;
      height: 200px;
      background-color: #f3f3f3;
      mask-image: url('mask.png');
      mask-position: center;
      mask-size: contain;
    }
  </style>
</head>
<body>
  <h1>Element with Mask Positioned at Center</h1>
  <div class="masked"></div>
</body>
</html>

In this example, the mask-position: center; positions the mask image at the center of the element.

🖥️ Browser Compatibility

The mask-position property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is advisable to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The mask-position property is a versatile tool for web designers and developers looking to create unique and visually engaging content.

By controlling the position of the mask image, you can manipulate the visibility of parts of an element, allowing for creative design solutions. Experiment with different mask images and positions to achieve the desired effect on your website.