mask-size

Examples

Filling the container

Use the mask-cover utility to scale the mask image until it fills the mask layer, cropping the image if needed:

<div class="mask-[url(/img/scribble.png)] mask-cover ..."></div>

Filling without cropping

Use the mask-contain utility to scale the mask image to the outer edges without cropping or stretching:

<div class="mask-[url(/img/scribble.png)] mask-contain ..."></div>

Using the default size

Use the mask-auto utility to display the mask image at its default size:

<div class="mask-[url(/img/scribble.png)] mask-auto ..."></div>

Using a custom value

Use the mask-[<value>] syntax to set the mask image size based on a completely custom value:

<div class="mask-[auto_100px] ...">
  <!-- ... -->
</div>

For CSS variables, you can also use the mask-(length:<custom-property>) syntax:

<div class="mask-(length:--my-mask-size) ...">
  <!-- ... -->
</div>

This is just a shorthand for mask-[length:var(<custom-property>)] that adds the var() function for you automatically.

Responsive design

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

<div class="mask-auto md:mask-contain ...">
  <!-- ... -->
</div>

Learn more about using variants in the variants documentation.