CSS mask-repeat Property

Beginner
7 min read
Updated: Oct 2026
3 examples
Live preview
CSS mask-repeat property tiling a mask image across a box
Definition

Definition and Usage

The mask-repeat property sets how each mask-image tiles inside the mask painting area. The mask can repeat on both axes, only one axis, or not at all. space leaves even gaps. round stretches copies so they fit without gaps.

The initial value is repeat. The property is not inherited. One keyword can cover both axes. Two keywords set horizontal first, then vertical. With several mask layers, list a repeat value for each layer, separated by commas. mask-position places a single no-repeat mask.

Standard-track.

Not deprecated and not experimental. Unprefixed mask-repeat is Baseline widely available. Older Safari needed -webkit-mask-repeat. Logical values such as repeat-block and repeat-inline are newer and still limited.

Syntax

CSS Syntax

syntax.css
mask-repeat: repeat | no-repeat | repeat-x | repeat-y | space | round | initial | inherit;

Two keywords set axes separately, such as repeat no-repeat (same as repeat-x). Separate multiple mask layers with commas.

Values

Property Values

ValueDescriptionTry it
repeatTiles both axes. Edge copies may be clipped. This is the initial valueTry it
no-repeatShows one copy. Place it with mask-positionTry it
repeat-xTiles only horizontally. Same as repeat no-repeatTry it
repeat-yTiles only vertically. Same as no-repeat repeatTry it
spaceTiles without clipping. Even gaps sit between copiesTry it
roundTiles without gaps. Copies may stretch to fit the boxTry it
repeat no-repeatTwo-value form: horizontal, then verticalTry it
initialResets this property to repeatTry it
inheritCopies this property from the parent elementTry it
Approach

How to Use mask-repeat

Give the element a mask and a tile size, then choose how that mask tiles.

  1. Set a mask-image on the element. Without a mask, repeat has nothing to tile.
  2. Give the element a visible size and a background you can see through the mask.
  3. Set a fixed mask-size so each tile is small enough to see the pattern.
  4. Set mask-repeat. Use no-repeat with mask-position when you want one placed mask.
PieceRequired?Role
mask-imageYesThe image or gradient that tiles as the mask
A visible boxYesContent or a height, so the tiles have somewhere to show
mask-repeatYesHow the mask tiles on each axis
mask-sizeOftenThe size of each tile. Helps space and round read clearly
mask-positionFor no-repeatWhere the single mask sits
Try it

Live Preview

One small circular mask over a gradient. Change mask-repeat and watch how it fills the box.

The tile size stays the same. Only the repeat mode changes.

Repeat

mask-repeat: repeat

Code

CSS Examples

Each snippet adds only what mask-repeat needs: a mask, a tile size, and a sized box. Use Try It Yourself for a live editor.

Example 1 — One Mask

Show a single mask tile in the middle. Nothing else fills the box.

CSS
<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    mask-image: radial-gradient(circle, #000 0 8px, transparent 9px);
    mask-size: 40px 40px;
    mask-position: center;
    mask-repeat: no-repeat;
  }
</style>

<div></div>
Try It Yourself

How It Works

  1. Make a box. height: 160px and the border give the mask a clear area.
  2. Define one tile. The radial gradient is a small circular mask. mask-size: 40px 40px sets that tile's size. The linear gradient is what shows through.
  3. Stop tiling. mask-repeat: no-repeat draws the mask once.
  4. Place it. mask-position: center puts that one copy in the middle. Without position, it would sit at the top left.

Example 2 — Horizontal Row

Tile left to right only. The vertical axis stays a single row.

CSS
<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    mask-image: radial-gradient(circle, #000 0 8px, transparent 9px);
    mask-size: 40px 40px;
    mask-position: center;
    mask-repeat: repeat-x;
  }
</style>

<div></div>
Try It Yourself

How It Works

  1. Same tile. The circle and 40px size match the first example.
  2. Repeat on X only. repeat-x is shorthand for repeat no-repeat: horizontal tiles, one vertical row.
  3. Center the row. mask-position: center keeps that row in the vertical middle.
  4. Edges may clip. If the box width is not a multiple of 40px, the last horizontal tile can be cut off. That is normal for repeat and repeat-x.

Example 3 — Even Gaps

Tile as many full copies as fit, and put equal space between them.

CSS
<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background: linear-gradient(135deg, #059669, #0d9488);
    mask-image: radial-gradient(circle, #000 0 8px, transparent 9px);
    mask-size: 40px 40px;
    mask-repeat: space;
  }
</style>

<div></div>
Try It Yourself

How It Works

  1. Fit whole tiles only. space does not clip edge copies the way repeat does.
  2. Pin the first and last. Copies sit against the edges when more than one fits, and leftover room becomes even gaps.
  3. Position is mostly ignored. With space, the browser places the tiles. mask-position matters mainly when only one tile fits.
  4. Compare with round. round also avoids gaps from clipping, but it stretches each tile instead of adding whitespace.

Edge Cases & Pitfalls

If the tiles look clipped, stretched, or missing, one of these is usually why.

image

No mask-image, no tiling

mask-repeat only tiles an active mask layer. Set mask-image first, or use the mask shorthand that includes one.

clip

repeat can cut the edges

When the box size is not a multiple of the tile size, edge copies are clipped. Use space for whole tiles with gaps, or round for whole tiles that stretch.

round

round can distort the mask

It is the only common value that may change the tile aspect ratio so copies fill the box without gaps. Prefer space if you must keep the original proportions.

size

Tile size comes from mask-size

A huge mask with repeat may look like one copy. Set mask-size so each tile is small enough to see the pattern.

position

space mostly ignores position

mask-position places a no-repeat mask. With space, the browser pins and spaces the tiles unless only one tile fits.

Compatibility

Browser Support

mask-repeat is a browser painting property for CSS masking. Node.js, Deno, and Bun do not apply it. Unprefixed support is Baseline. Older WebKit used -webkit-mask-repeat.

✓ Baseline · Widely available since Dec 2023

mask-repeat

Unprefixed: Chrome 120+, Edge 120+, Firefox 53+, Safari 15.4+. Prefixed WebKit support is older. Internet Explorer has no CSS mask-repeat.

97% Modern browser support
Google Chrome 120+ unprefixed · older with -webkit-
Full support
Mozilla Firefox 53+
Full support
Apple Safari 15.4+ unprefixed · older with -webkit-
Full support
Microsoft Edge 120+ unprefixed
Full support
Opera 106+ unprefixed
Full support
Samsung Internet 25+ unprefixed
Full support
Internet Explorer No support
None
mask-repeat Widely supported

Bottom line: Safe for current browsers with the unprefixed property. Add -webkit-mask-repeat only if you must support older Safari or Chromium builds before the Baseline versions above. Prefer physical keywords over repeat-block / repeat-inline on a normal page. Do not treat this as a Node.js or other runtime feature.

Remember

Key Takeaways

  • Role: choose how each mask image tiles — both axes, one axis, or not at all.
  • Values: repeat, no-repeat, repeat-x, repeat-y, space, and round.
  • Initial value: repeat. It is not inherited.
  • Gaps vs stretch: space adds gaps; round may stretch tiles to avoid gaps.

One line: mask-repeat decides whether the mask tiles — after you have a mask-image, and often after you set a clear tile size.

Frequently Asked Questions

It sets how each mask image tiles inside the mask painting area. The mask can repeat on both axes, only horizontally, only vertically, or not at all. space and round control gaps and stretching. The initial value is repeat.
repeat, which means repeat on both axes. Edge tiles may be clipped if the box size is not a multiple of the mask size. The property is not inherited.
no-repeat shows one copy. repeat-x tiles only left to right. repeat-y tiles only top to bottom. Use mask-position to place a single no-repeat mask.
space tiles without clipping and puts even gaps between copies. round tiles without gaps and may stretch each copy so they fit the box evenly. round is the value that can change the mask aspect ratio.
No. There must be a mask-image (or a mask shorthand that sets one). Without a mask layer, changing mask-repeat has nothing to tile.
Unprefixed mask-repeat is Baseline and widely available since December 2023: Chrome 120+, Edge 120+, Firefox 53+, Safari 15.4+. Older WebKit browsers used -webkit-mask-repeat. Internet Explorer does not support it. This is a browser CSS property. Node.js, Deno, and Bun do not paint it.

Next: mask-size

Learn how to scale each mask tile with lengths, percentages, or keywords.

mask-size tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS mask-position Property CSS mask-size Property