CSS Almanac → Properties → M → mask-repeat

mask-repeat

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Let’s put those CSS skills to work! Claim $50 in free hosting credit on Cloudways with code CSSTRICKS.

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

ChromeFirefoxIEEdgeSafari
109*53No106*15.4

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
105*104105*15.4

More information

You’ve got the talent — all you need now is the tools. Claim $50 in free hosting credit on Cloudways with code CSSTRICKS!
This comment thread is closed. If you have important information to share, please contact us.