Mask Image

Utilities for controlling how an element is masked or clipped using mask images and gradients.

Class CSS Output
mask-none
mask-image: none;
mask-linear
mask-radial
mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
mask-composite: intersect;
--tw-mask-radial: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-stops));
mask-radial-at-center
mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
mask-composite: intersect;
--tw-mask-radial: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-stops));
--tw-mask-radial-position: center;
mask-center
mask-position: center;
mask-repeat
mask-repeat: repeat;
mask-no-repeat
mask-repeat: no-repeat;
mask-cover
mask-size: cover;

Reference

mask-composite MDN ↗
mask-image MDN ↗
mask-position MDN ↗
mask-repeat MDN ↗
mask-size MDN ↗