CSS mask-repeat

The mask-repeat property in CSS defines how a mask image is repeated to cover the entire element to which it is applied. This property can take values like repeat, repeat-x, repeat-y, no-repeat, etc.

Here is an example to understand how mask-repeat works:

Result:


    .mask {
      mask-image: url('mask.png');
      mask-repeat: repeat-x;
      width: 200px;
      height: 200px;
      background-color: #f2f2f2;
    }

In this example, we have a mask class with a mask image set to mask.png and mask-repeat set to repeat-x. The resulting element will have the mask image repeated along the x-axis.