Tailwind CSS Mask

Class Name	Type	Description
mask	Component	Masks the content with shape.
mask-squircle	Modifier	Applies squircle shape.
mask-heart	Modifier	Applies heart shape.
mask-hexagon	Modifier	Applies hexagon shape.
mask-hexagon-2	Modifier	Applies hexagon alternative shape.
mask-decagon	Modifier	Applies decagon shape.
mask-pentagon	Modifier	Applies pentagon shape.
mask-diamond	Modifier	Applies diamond shape.
mask-square	Modifier	Applies square shape.
mask-circle	Modifier	Applies circle shape.
mask-parallelogram	Modifier	Applies parallelogram shape.
mask-parallelogram-2	Modifier	Applies parallelogram alternative shape.
mask-parallelogram-3	Modifier	Applies parallelogram alternative shape.
mask-parallelogram-4	Modifier	Applies parallelogram alternative shape.
mask-star	Modifier	Applies star shape.
mask-star-2	Modifier	Applies star alternative shape.
mask-triangle	Modifier	Applies triangle shape.
mask-triangle-2	Modifier	Applies triangle alternative shape.
mask-triangle-3	Modifier	Applies triangle alternative shape.
mask-triangle-4	Modifier	Applies triangle alternative shape.
mask-half-1	Modifier	Crops only the first half of mask.
mask-half-2	Modifier	Crops only the second half of mask.

Basic examples

Squircle

By applying the class mask along with mask-{shape-name} to an element, you can utilize various shapes to clip your image.

Utilizing the classes mask-half-1 and mask-half-2 in conjunction with mask-shape_name allows you to isolate specific sides of the shape. mask-half-1 represents the left side, while mask-half-2 represents the right side. Incorporate these classes to enhance the style and appearance of your mask shapes.

mask-half-2

Example of mask-half-2.

FlyonUI

Tailwind CSS Mask

Basic examples

Squircle

Heart

Hexagon

Hexagon-2

Decagon

Pentagon

Diamond

Circle

Parallelogram

Parallelogram-2

Parallelogram-3

Parallelogram-4

Star

Star-2

Triangle

Triangle-2

Triangle-3

Triangle-4

Sides

mask-half-1

mask-half-2

On this page

Mask