N
neokit

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
squircle
heart
heart
hexagon
hexagon
hexagon-2
hexagon-2
decagon
decagon
pentagon
pentagon
diamond
diamond
square
square
circle
circle
star
star
star-2
star-2
triangle
triangle
triangle-2
triangle-2
triangle-3
triangle-3
triangle-4
triangle-4
parallelogram
parallelogram
parallelogram-2
parallelogram-2
parallelogram-3
parallelogram-3
parallelogram-4
parallelogram-4

With colored backgrounds

Mask clips any element, not just images.

Color tokens as filled shapes

Half masks

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

Half-1 and half-2
half-1
half-2
half star