CSS

🔁 Mastering mask-repeat in CSS

📌 What Is mask-repeat?

The mask-repeat property controls how a mask image repeats across the element’s box — similar to how background-repeat works for backgrounds.
It determines whether the mask image should repeat, stretch, or not repeat across the element.

>>“mask-repeat defines how your stencil (mask) tiles — giving you full creative control.”

🧩 Syntax

Basic Syntax

mask-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round;

You can also define 2 values → mask-repeat: repeat no-repeat;

🎯 All mask-repeat Values Explained

Value	Description
repeat	Repeats mask both horizontally & vertically
repeat-x	Repeats mask only horizontally
repeat-y	Repeats mask only vertically
no-repeat	No repetition (only one mask instance)
space	Adds equal space between repeated masks without cropping them
round	Scales mask so it fits perfectly an integer number of times

🧪 Example: No Repeat

no-repeat example

.box {
  mask-image: url(mask-star.png);
  mask-repeat: no-repeat;
}

✔ Only one star mask appears.

🧪 Example: Repeat Horizontally

repeat-x example

.banner {
  mask-image: url(pattern.png);
  mask-repeat: repeat-x;
}

✔ Useful for horizontal decorative dividers.

🧪 Example: Repeat Vertically

repeat-y example

.sidebar {
  mask-image: url(mask-gradient.png);
  mask-repeat: repeat-y;
}

✔ Creates vertical patterned masking.

🧪 Example: Full Repeat

repeat

.texture {
  mask-image: url(texture-mask.png);
  mask-repeat: repeat;
}

✔ Great for texture-style reveals or mosaic effects.

🧪 Example: Space Mode

space example

.spaced {
  mask-image: url(dot.png);
  mask-repeat: space;
}

✔ Even spacing between mask images
✔ No cropping — layout adjusts dynamically

🧪 Example: Round Mode

round example

.rounded-mask {
  mask-image: url(tile.png);
  mask-repeat: round;
}

✔ The mask image is scaled so it fits perfectly an integer number of times.
✔ No leftover partial mask at edges.

🎨 Example: Combining mask-size + mask-repeat

Custom tiling

.pattern {
  mask-image: url(icon.png);
  mask-size: 40px;
  mask-repeat: repeat;
}

✔ Adjusts the mask tile size
✔ Helps build custom stencil patterns

🔥 Advanced Example: Multi-layer Mask

Multiple masks

.multi {
  mask-image: url(shape1.png), url(shape2.png);
  mask-repeat: repeat, no-repeat;
}

✔ First mask repeats
✔ Second mask appears only once

🧠 Best Practices

Use no-repeat for logos or single shapes
Use repeat for textures or patterns
Use round to avoid awkward cropping
Use space for symmetrical spacing effects
Always pair with mask-size for perfect control

⚠️ Browser Support Notes

✔ Chrome
✔ Safari
✔ Edge
⚠️ Firefox (requires -webkit-mask-repeat)

Note

For best compatibility, include both mask-repeat and -webkit-mask-repeat.

🔍 Debugging Tips

If mask disappears: check mask-image path
If tiling looks wrong: adjust mask-size or mask-position
Avoid large mask images when repeating → performance impact

🔗 Helpful Resources

>>“mask-repeat lets your mask behave like a pattern — tile it, stretch it, space it, shape it.” 🎭✨