DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.
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 |
|---|---|---|---|---|
| 106* | 53 | No | 103* | 15.4 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 102* | 101 | 101* | 15.4 |
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; }
