PLAY CSS
jaen

Effects

mask-repeat

mask-repeat sets whether a mask image is tiled and how the tiles are laid out. The initial value, repeat, tiles it like wallpaper, so use no-repeat to place it once.

Syntax<repeat-style># …
<repeat-style>#

<repeat-style> = repeat-x | repeat-y
  | [ repeat | space | round | no-repeat ]{1,2}

Preview

Presets
Drag the bottom-right corner to resize

Code

.box {
  background: linear-gradient(
    135deg,
    #88d1c7,
    #77a7d7,
    #eaac3a
  );
  mask-image: url(/mask-star.svg);
  mask-size: 36px;
  mask-repeat: space;
}

Controls

mask-repeatspace
Same value for both directions
mask-repeat

About

Same tiling as background-repeat

  • repeat: repeats until the area is covered. This is the initial value. Images that don’t fit at the edges are cut off.
  • space: places as many whole images as fit and shares the leftover length equally between the gaps.
  • round: when the images don’t fit a whole number of times, resizes them so they do.
  • no-repeat: places a single image without repeating.

With two values, the first sets the horizontal tiling and the second the vertical. repeat-x means repeat no-repeat and repeat-y means no-repeat repeat. The background-repeat page covers the details of each.

The element vanishes in the gaps

Where there is no mask image, the mask counts as transparent. So in the gaps left by space and around an image placed with no-repeat, the element itself disappears. That differs from background images, where the background color shows in the gaps.

Watch out

  • Because the initial value is repeat, a small mask-size or a small image tiles unexpectedly. To cut out a single icon shape, use no-repeat.
  • space and round fit the images to the area the mask is positioned in (mask-origin, which by default reaches the outer edge of the border), unlike backgrounds, which measure up to the padding.
  • Separate values with commas to set each mask-image layer.
  • Chrome and Edge support the name without -webkit- from version 120, and Safari from 15.4. For older browsers, write -webkit-mask-repeat.
  • The preview here masks the box with a star image at 36px. Drag the bottom right of the box to resize it and watch the number of stars change with space and round.

References

MDN Web Docsmask-repeatSpecificationCSS Masking Module Level 1Can I usemask-repeat

Comments

PLAY CSS