CSS mask-repeat Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The mask-repeat property in CSS is used to define how a mask image is repeated (tiled) across an element.

This property allows you to control the repetition behavior of the mask image, which can enhance the visual presentation of your web elements.

Masking is commonly used to create complex shapes, gradients, and patterns by overlaying an image or graphic that determines the visibility of different parts of the element.

💡 Syntax

The mask-repeat property can accept one or two values, representing the horizontal and vertical repeat behavior, respectively.

Syntax

Copied

element {
  mask-repeat: value;
}

🎛️ Default Value

The default value of the mask-repeat property is repeat, meaning the mask image will be tiled both horizontally and vertically by default.

🏠 Property Values

Value	Description
repeat	Tiles the mask image horizontally and vertically.
repeat-x	Tiles the mask image only horizontally.
repeat-y	Tiles the mask image only vertically.
no-repeat	The mask image is not tiled.
space	Distributes the mask image without clipping, with extra space around the images.
round	Scales and repeats the mask image to fit the element without clipping.

📄 Example

In this example, we'll use a mask image and control its repetition using the mask-repeat property.

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-repeat Example</title>
  <style>
    .masked {
      width: 300px;
      height: 300px;
      background: url('path-to-your-background-image.jpg');
      mask-image: url('path-to-your-mask-image.png');
      mask-repeat: repeat; /* You can change this to no-repeat, repeat-x, repeat-y, space, or round */
    }
  </style>
</head>
<body>
  <h1>Element with Mask Image</h1>
  <div class="masked"></div>
</body>
</html>

In this example, replace 'path-to-your-background-image.jpg' and 'path-to-your-mask-image.png' with the actual paths to your background and mask images.

🖥️ Browser Compatibility

The mask-repeat property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, and Edge. It is recommended to check compatibility on different browsers and platforms to ensure consistent behavior across your user base.

🎉 Conclusion

The mask-repeat property is a versatile tool for web designers looking to create visually compelling effects using mask images.

By controlling the repetition of mask images, you can add depth and style to your web elements. Experiment with different values and combinations to achieve the desired visual effect on your website.