mask-repeat

Examples

Basic example

Use the mask-repeat utility to repeat the mask image both vertically and horizontally:

<div class="mask-[url(/img/circle.png)] mask-[size:50px_50px] mask-repeat ..."></div>

Repeating horizontally

Use the mask-repeat-x utility to only repeat the mask image horizontally:

<div class="mask-[url(/img/circle.png)] mask-[size:50px_50px] mask-repeat-x ..."></div>

Repeating vertically

Use the mask-repeat-y utility to only repeat the mask image vertically:

<div class="mask-[url(/img/circle.png)] mask-[size:50px_50px] mask-repeat-y ..."></div>

Preventing clipping

Use the mask-repeat-space utility to repeat the mask image without clipping:

<div class="mask-[url(/img/circle.png)] mask-[size:50px_50px] mask-repeat-space ..."></div>

Preventing clipping and gaps

Use the mask-repeat-round utility to repeat the mask image without clipping, stretching if needed to avoid gaps:

<div class="mask-[url(/img/circle.png)] mask-[size:50px_50px] mask-repeat-round ..."></div>

Disabling repeating

Use the mask-no-repeat utility to prevent a mask image from repeating:

<div class="mask-[url(/img/circle.png)] mask-[size:50px_50px] mask-no-repeat ..."></div>

Responsive design

Prefix a mask-repeat utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="mask-repeat md:mask-repeat-x ...">
  <!-- ... -->
</div>

Learn more about using variants in the variants documentation.