content

Tailwind CSS Mask

Mask crops the content of the element to common shapes.

Class Name
Type
Description
maskComponentMasks the content with shape.
mask-squircleModifierApplies squircle shape.
mask-heartModifierApplies heart shape.
mask-hexagonModifierApplies hexagon shape.
mask-hexagon-2ModifierApplies hexagon alternative shape.
mask-decagonModifierApplies decagon shape.
mask-pentagonModifierApplies pentagon shape.
mask-diamondModifierApplies diamond shape.
mask-squareModifierApplies square shape.
mask-circleModifierApplies circle shape.
mask-parallelogramModifierApplies parallelogram shape.
mask-parallelogram-2ModifierApplies parallelogram alternative shape.
mask-parallelogram-3ModifierApplies parallelogram alternative shape.
mask-parallelogram-4ModifierApplies parallelogram alternative shape.
mask-starModifierApplies star shape.
mask-star-2ModifierApplies star alternative shape.
mask-triangleModifierApplies triangle shape.
mask-triangle-2ModifierApplies triangle alternative shape.
mask-triangle-3ModifierApplies triangle alternative shape.
mask-triangle-4ModifierApplies triangle alternative shape.
mask-half-1ModifierCrops only the first half of mask.
mask-half-2ModifierCrops only the second half of mask.

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

Example of heart.

Example of hexagon.

Example of hexagon-2.

Example of decagon.

Example of pentagon.

Example of diamond.

Example of circle.

Example of parallelogram.

Example of parallelogram-2.

Example of parallelogram-3.

Example of parallelogram-4.

Example of star.

Example of star-2.

Example of triangle.

Example of triangle-2.

Example of triangle-3.

Example of triangle-4.

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.

Example of mask-half-2.