Mask

Clips any element to a predefined CSS shape. Wraps a <div class="mask mask-[shape]">. Works on images, colored divs, avatars, and more.

All shapes

19 built-in shapes.

Shape grid

squircle

heart

hexagon

hexagon-2

decagon

pentagon

diamond

square

circle

star

star-2

triangle

triangle-2

triangle-3

triangle-4

parallelogram

parallelogram-2

parallelogram-3

parallelogram-4

With colored backgrounds

Mask clips any element, not just images.

Half masks

half-1 clips the left half, half-2 clips the right half. Used for star/rating half-fill.