Mask clips its child element to a CSS shape — hexagon, circle, squircle, and more. Use it on images or icon containers to add visual variety without extra utility classes.
Basic Mask
<c-lb.mask shape="squircle" src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" alt="Mask example" />
Shapes
<div class="flex flex-wrap gap-4">
<c-lb.mask shape="squircle" src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" class="w-20" alt="Squircle" />
<c-lb.mask shape="heart" src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" class="w-20" alt="Heart" />
<c-lb.mask shape="hexagon" src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" class="w-20" alt="Hexagon" />
<c-lb.mask shape="star" src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" class="w-20" alt="Star" />
<c-lb.mask shape="circle" src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" class="w-20" alt="Circle" />
<c-lb.mask shape="diamond" src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" class="w-20" alt="Diamond" />
<c-lb.mask shape="triangle" src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" class="w-20" alt="Triangle" />
<c-lb.mask shape="pentagon" src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" class="w-20" alt="Pentagon" />
</div>
API Reference
c-lb.mask
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| shape |
squircle
heart
hexagon
hexagon-2
decagon
pentagon
diamond
square
circle
star
star-2
triangle
triangle-2
triangle-3
triangle-4
|
squircle
|
No | Mask shape |
| half |
1
2
|
- | No | Crop to half |