mask-mode

Examples

Basic example

Use the mask-alpha, mask-luminance and mask-match utilities to control the mode of an element's mask:

<div class="mask-alpha mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-luminance mask-r-from-white mask-r-from-50% mask-r-to-black bg-[url(/img/mountains.jpg)] ..."></div>

When using mask-luminance the luminance value of the mask determines visibility, so sticking with grayscale colors will produce the most predictable results. With mask-alpha, the opacity of the mask determines the visibility of the masked element.

Responsive design

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

<div class="mask-alpha md:mask-luminance ...">
  <!-- ... -->
</div>

Learn more about using variants in the variants documentation.