---
title: "Mask"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-04-22
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Mask for clipping images into circles, hexagons, and squircles. Pure CSS shapes for avatars, galleries, and creative UI layouts."
url: https://frutjam.com/components/mask
---

# Mask Component

 Mask components apply geometric or custom shapes to images and elements, creating visual interest and unique designs. Built with CSS mask properties, masks enable creative image framing and decorative styling. The Frutjam mask system supports multiple shapes—ideal for avatar frames, gallery presentations, and artistic layouts.

| Class         | Type     | Description                               |
| ------------- | -------- | ----------------------------------------- |
| mask          | Base     | Clips element to a CSS mask shape         |
| mask-circle   | Style    | Circular mask                             |
| mask-squircle | Style    | Squircle (rounded square) mask            |
| mask-heart    | Style    | Heart shape mask                          |
| mask-hexagon  | Style    | Hexagon shape mask                        |
| mask-pentagon | Style    | Pentagon shape mask                       |
| mask-diamond  | Style    | Diamond shape mask                        |
| mask-star     | Style    | Five-pointed star mask                    |
| mask-star-2   | Style    | Six-pointed star mask                     |
| mask-triangle | Style    | Triangle shape mask                       |
| mask-half-1   | Modifier | Left half of the shape (for split masks)  |
| mask-half-2   | Modifier | Right half of the shape (for split masks) |

## Basic Usage

Create a simple circular mask with a gradient background.

## Mask Shapes

Apply different geometric shapes to mask elements.

```html
<div class="mask mask-circle h-24 w-24">
  <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div>
</div>

<div class="mask mask-squircle h-24 w-24">
  <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div>
</div>

<div class="mask mask-hexagon h-24 w-24">
  <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div>
</div>

<div class="mask mask-squircle h-24 w-24">
  <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div>
</div>
```


## Mask Sizes

Apply masks at different sizes for flexible layout options.

```html
<div class="mask mask-circle h-16 w-16">
  <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div>
</div>

<div class="mask mask-circle h-24 w-24">
  <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div>
</div>

<div class="mask mask-circle h-32 w-32">
  <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div>
</div>

<div class="mask mask-circle h-48 w-48">
  <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div>
</div>
```


## Mask with Different Gradients

Combine masks with various gradient directions and colors.

```html
<div class="mask mask-circle h-32 w-32">
  <div class="w-full h-full bg-linear-to-b from-primary to-accent"></div>
</div>

<div class="mask mask-hexagon h-32 w-32">
  <div class="w-full h-full bg-linear-to-r from-secondary to-primary"></div>
</div>

<div class="mask mask-squircle h-32 w-32">
  <div class="w-full h-full bg-linear-to-t from-error to-warning"></div>
</div>

<div class="mask mask-squircle h-32 w-32">
  <div class="w-full h-full bg-linear-to-l from-success to-info"></div>
</div>
```


## Mask with Solid Colors

Apply masks with solid background colors for simple designs.

```html
<div class="mask mask-circle h-24 w-24 bg-primary"></div>
<div class="mask mask-squircle h-24 w-24 bg-secondary"></div>
<div class="mask mask-hexagon h-24 w-24 bg-accent"></div>
<div class="mask mask-squircle h-24 w-24 bg-info"></div>
```


## Combined Variants

Mix different shapes, sizes, and colors in mask layouts.

```html
<div class="mask mask-hexagon h-48 w-48 bg-linear-to-r from-primary to-secondary"></div>

<div class="mask mask-squircle h-40 w-40 bg-linear-to-br from-accent to-info"></div>

<div class="mask mask-circle h-32 w-32">
  <div class="w-full h-full bg-linear-to-t from-success to-warning"></div>
</div>
```