CSS mask-repeat Property

Description

The mask-repeat property controls how a mask image is tiled across an element’s painted box: whether the mask is duplicated to fill the area, how tiles are arranged, and how gaps or overlaps between tiles are treated. It operates on each mask layer independently when multiple mask images are used, so the tiling behavior you choose applies per-layer rather than globally. The property affects only the repetition of the mask artwork — not its intrinsic pixel content — and therefore directly shapes which parts of the underlying element remain visible or are hidden by repeated translucent/opaque regions.

Repetition is applied after the mask image has been sized and positioned, so the visual outcome is a combination of tiling plus those prior adjustments. For example, any scaling done by mask-size determines the tile dimensions, and the origin for laying out the tiles is influenced by mask-position. Likewise, the source(s) used as the mask are specified by mask-image, and the way they are combined with other mask layers determines the final clipping pattern.

When multiple mask layers are present, each layer’s repeat behavior is applied independently, and the resulting tiled images are then combined according to the compositing rules you’ve set for masks. The compositing step can change how overlapping tiles from different layers interact (for example, whether they multiply, add, or replace), so tiling may produce complex transparency patterns when layered; this relationship is governed by mask-composite. The general concept and visual effect of repeating a mask is analogous to how repeating works for backgrounds, though mask tiling affects alpha/transparency rather than color painting — see background-repeat for a comparable behavior on background images.

In practical use, repetition lets you turn a small alpha texture into a repeating stencil that covers an element, useful for patterned transparency, texture overlays, or creating repeated cutouts. Choosing not to repeat a mask yields a single “stamp” which can be positioned or scaled to produce a focused vignette or shaped reveal. Keep in mind that extensive tiling of large or complex masks can influence rendering cost, and the visual result depends strongly on the mask’s alpha content and how it is combined with other masking layers.

Definition

Initial value: repeat
Applies to: all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inherited: no
Computed value: Consists of two keywords, one per dimension
Animatable: yes
JavaScript syntax: object.style.maskRepeat

Syntax

mask-repeat: <repeat-style> | <repeat-style> <repeat-style>;

Values

<repeat-style>
1. repeat The mask image is repeated both horizontally and vertically (default).
2. repeat-x The mask image is repeated only horizontally.
3. repeat-y The mask image is repeated only vertically.
4. no-repeat The mask image is not repeated; it is shown only once.
5. space The mask image is repeated as many times as will fit, with space distributed evenly between each repetition. There is no clipping of the image.
6. round The mask image is repeated and scaled so that it exactly fits the container, rounding the image size to avoid partial images.
7. Two-value syntax You can combine horizontal and vertical values:
  mask-repeat: repeat no-repeat; mask-repeat: round space;

Example

HTML

<body>

  <div class="container">

    <h2>CSS mask-repeat examples</h2>



    <div class="grid">

      <div class="example">

        <div class="box repeat"></div>

        <div class="label">mask-repeat: repeat</div>

      </div>



      <div class="example">

        <div class="box repeat-x"></div>

        <div class="label">mask-repeat: repeat-x</div>

      </div>



      <div class="example">

        <div class="box repeat-y"></div>

        <div class="label">mask-repeat: repeat-y</div>

      </div>



      <div class="example">

        <div class="box no-repeat"></div>

        <div class="label">mask-repeat: no-repeat</div>

      </div>



      <div class="example">

        <div class="box space"></div>

        <div class="label">mask-repeat: space</div>

      </div>



      <div class="example">

        <div class="box round"></div>

        <div class="label">mask-repeat: round</div>

      </div>

    </div>

  </div>

</body>

CSS

/* Layout */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #f4f6f8;
  padding: 24px;
  color: #111;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

h2 {
  margin: 0 0 16px 0;
  font-size: 18px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.example {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Box that receives the mask */
.box {
  width: 220px;
  height: 120px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff7a7a, #ffd47a);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) inset;

  /* A small circular dot used as the mask image */
  mask-image: radial-gradient(circle at center, black 60%, transparent 61%);
  mask-size: 40px 40px; /* make the mask image small so it can tile */
  mask-position: center;

  /* WebKit-prefixed versions for Safari */
  -webkit-mask-image: radial-gradient(circle at center, black 60%, transparent 61%);
  -webkit-mask-size: 40px 40px;
  -webkit-mask-position: center;
}

/* Different mask-repeat values */
.box.repeat   { mask-repeat: repeat;   -webkit-mask-repeat: repeat; }
.box.repeat-x { mask-repeat: repeat-x; -webkit-mask-repeat: repeat-x; }
.box.repeat-y { mask-repeat: repeat-y; -webkit-mask-repeat: repeat-y; }
.box.no-repeat{ mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
.box.space    { mask-repeat: space;    -webkit-mask-repeat: space; }
.box.round    { mask-repeat: round;    -webkit-mask-repeat: round; }

.label {
  font-size: 13px;
  color: #333;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS mask-repeat property. Hover over a browser icon to see the version that first introduced support for this CSS property.