In CSS, the mask-repeat property tells a mask if it should repeated or not and in which directions. It’s a lot like background-repeat. The default is repeat.
This mask does not repeat:
This mask repeats both ways:
This mask repeats along the x axis:
This mask repeats along the y axis:
Browser support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 100* | 53 | No | 97* | TP* |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 97* | 95 | 97* | 15.2* |
More information
Clipping and Masking in CSS
Masking vs. Clipping: When to Use Each
33: Clipping and Masking
#185: Playing with CSS Masks
Mask Compositing: The Crash Course
Image Fragmentation Effect With CSS Masks and Custom Properties
Related properties
mask-clip
.element { mask-clip: padding-box; }
mask-image
.element { mask-image: url(star.svg); }
mask-mode
.element { mask-mode: alpha; }
mask-origin
.element { mask-origin: content-box; }
mask-position
.element { mask-position: 20px center; }
mask-size
.element { mask-size: 200px 100px; }
mask-type
.element { mask-type: alpha; }
