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; }`

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 ↗

CSS Properties

mask-composite
mask-image
mask-position
mask-repeat
mask-size