Mask

Mask crops the content of the element to common shapes.

This page is not up to date. Some of the examples might not work as expected.
Class name		Type
mask
Component
Masks the content with shape
mask-squircle
Style
squircle
mask-heart
Style
heart
mask-hexagon
Style
hexagon vertical
mask-hexagon-2
Style
hexagon horizontal
mask-decagon
Style
decagon
mask-pentagon
Style
pentagon
mask-diamond
Style
diamond
mask-square
Style
square
mask-circle
Style
circle
mask-star
Style
star
mask-star-2
Style
star (bold)
mask-triangle
Style
triangle pointing top
mask-triangle-2
Style
triangle pointing down
mask-triangle-3
Style
triangle pointing left
mask-triangle-4
Style
triangle pointing right
mask-half-1
Modifier
Crops only the first half of mask
mask-half-2
Modifier
Crops only the second half of mask

Squircle

Squircle CSS mask
<img
  class="$$mask $$mask-squircle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-squircle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Heart

Heart CSS mask
<img
  class="$$mask $$mask-heart"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-heart"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Hexagon

Hexagon CSS mask
<img
  class="$$mask $$mask-hexagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-hexagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Hexagon-2

Hexagon-2 CSS mask
<img
  class="$$mask $$mask-hexagon-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-hexagon-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Decagon

Decagon CSS mask
<img
  class="$$mask $$mask-decagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-decagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Pentagon

Pentagon CSS mask
<img
  class="$$mask $$mask-pentagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-pentagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Diamond

Diamond CSS mask
<img
  class="$$mask $$mask-diamond"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-diamond"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Square

Square CSS mask
<img
  class="$$mask $$mask-square"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-square"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Circle

Circle CSS mask
<img
  class="$$mask $$mask-circle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-circle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Parallelogram

Parallelogram CSS mask
<img
  class="$$mask $$mask-parallelogram"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-parallelogram"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Parallelogram-2

Parallelogram-2 CSS mask
<img
  class="$$mask $$mask-parallelogram-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-parallelogram-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Parallelogram-3

Parallelogram-3 CSS mask
<img
  class="$$mask $$mask-parallelogram-3"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-parallelogram-3"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Parallelogram-4

Parallelogram-4 CSS mask
<img
  class="$$mask $$mask-parallelogram-4"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-parallelogram-4"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Star

Star CSS mask
<img
  class="$$mask $$mask-star"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-star"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Star-2

Star-2 CSS mask
<img
  class="$$mask $$mask-star-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-star-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Triangle

Triangle CSS mask
<img
  class="$$mask $$mask-triangle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-triangle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Triangle-2

Triangle-2 CSS mask
<img
  class="$$mask $$mask-triangle-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-triangle-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Triangle-3

Triangle-3 CSS mask
<img
  class="$$mask $$mask-triangle-3"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-triangle-3"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

Triangle-4

Triangle-4 CSS mask
<img
  class="$$mask $$mask-triangle-4"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
<img
  class="$$mask $$mask-triangle-4"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser