Mask

ADMIN PANEL

Square

Use Square mask by adding .mask & .mask-Square

Preview Html
avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-square">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Diamond

Use diamond mask by adding .mask & .mask-diamond

Preview Html
avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-diamond">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Circle

Use circle mask by adding .mask & .mask-circle

Preview Html
avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-circle">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Hexagon

Use hexagon mask by adding .mask & .mask-hexagon

Preview Html
avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-hexagon">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Heptagon

Use heptagon mask by adding .mask & .mask-heptagon

Preview Html
avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-heptagon">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Octagon

Use octagon mask by adding .mask & .mask-octagon

Preview Html
avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-octagon">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Triangle

To set triangle mask, you can use mask-triangle-1, mask-triangle-2, mask-triangle-3 & mask-triangle-4 class.

Preview Html
avatar
avatar
avatar
avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-triangle-4">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-triangle-2">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-triangle-1">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-triangle-3">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Pentagon

To set pentagon mask, you can use mask-pentagon-1, mask-pentagon-2, mask-pentagon-3 & mask-pentagon-4 class.

Preview Html
avatar
avatar
avatar
avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-pentagon-3">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-pentagon-1">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-pentagon-2">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-pentagon-4">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Parallelogram

To set parallelogram mask, you can use mask-parallelogram-1 & mask-parallelogram-2 class.

Preview Html
avatar
avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-parallelogram-1">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-parallelogram-2">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Trapezoid

To set trapezoid mask, you can use mask-trapezoid-1 & mask-trapezoid-2 class.

Preview Html
avatar
avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-trapezoid-1">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-trapezoid-2">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>
Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Buy Now