CSS mask-repeat Property

What You’ll Learn

The mask-repeat property controls how a mask-image tiles across an element — using the same keywords as background-repeat.

Introduction

The mask-repeat property in CSS defines how a mask image is repeated (tiled) across an element. This property lets you 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 that determines the visibility of different parts of the element. Pair it with mask-image, mask-size, and mask-position for full control.

Definition and Usage

Use mask-repeat: repeat (the default) to tile a small mask into a pattern, no-repeat for a single silhouette, or repeat-x / repeat-y to tile along one axis only. The syntax mirrors background-repeat, so if you know one, the other feels familiar.

📝 Syntax

The syntax for the mask-repeat property can accept one or two values, representing the horizontal and vertical repeat behavior:

element {
  mask-repeat: value;
}

Basic Example

.masked {
  width: 300px;
  height: 300px;
  background: url('/images/valley-pattern.jpg') center/cover;
  -webkit-mask-image: url('/images/apple.png');
  mask-image: url('/images/apple.png');
  -webkit-mask-size: 48px;
  mask-size: 48px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}

Syntax Rules

• The initial value is repeat (tiles both horizontally and vertically).
• mask-repeat only applies when a mask-image is set.
• Keywords include repeat, repeat-x, repeat-y, no-repeat, space, and round.
• Two values can set horizontal and vertical repeat independently (e.g. repeat no-repeat).
• Include -webkit-mask-repeat alongside mask-repeat for broader Safari support.

💎 Property Values

The mask-repeat property accepts the same keyword values as background-repeat.

🎯 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.

Common Repeat Values

Examples Gallery

Tile a mask into a pattern, show a single silhouette, tile horizontally, and compare multiple repeat values side by side.

<style>
  .masked {
    width: 300px;
    height: 300px;
    background: url('/images/valley-pattern.jpg') center/cover;
    -webkit-mask-image: url('/images/apple.png');
    mask-image: url('/images/apple.png');
    -webkit-mask-size: 48px;
    mask-size: 48px;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
  }
</style>

<div class="masked"></div>

<style>
  .mask-single {
    width: 280px;
    height: 200px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-mask-image: url('/images/apple.png');
    mask-image: url('/images/apple.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
</style>

<div class="mask-single"></div>

<style>
  .mask-row {
    width: 280px;
    height: 200px;
    background: url('/images/valley-pattern.jpg') center/cover;
    -webkit-mask-image: url('/images/apple.png');
    mask-image: url('/images/apple.png');
    -webkit-mask-size: 48px;
    mask-size: 48px;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
  }
</style>

<div class="mask-row"></div>

.mask-box {
  width: 200px;
  height: 140px;
  background: linear-gradient(135deg, #f97316, #ec4899);
  -webkit-mask-image: url('/images/apple.png');
  mask-image: url('/images/apple.png');
  -webkit-mask-size: 40px;
  mask-size: 40px;
}
.rpt-repeat { mask-repeat: repeat; }
.rpt-none { mask-repeat: no-repeat; mask-position: center; }
.rpt-x { mask-repeat: repeat-x; }

♿ Accessibility

• Set mask-image first — mask-repeat has no effect without an active mask layer.
• Do not hide essential content — Masked-away text or controls may be invisible but still exist in the DOM.
• Test with small mask-size — Use a small tile size so repeat patterns are visible and easy to evaluate.
• Check contrast — Partially masked areas can reduce readability if text sits over them.
• Offer fallbacks — Ensure content remains usable when masking is unsupported.

mask-repeat vs background-repeat

💡 Best Practices