---
title: "Mask"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
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/vi/components/mask
---

# Mask Component

Các thành phần mặt nạ áp dụng các hình dạng hình học hoặc tùy chỉnh cho hình ảnh và thành phần, tạo ra sự thú vị trực quan và thiết kế độc đáo. Được xây dựng với các thuộc tính mặt nạ CSS, mặt nạ cho phép tạo khung hình ảnh sáng tạo và tạo kiểu trang trí. Hệ thống mặt nạ Frutjam hỗ trợ nhiều hình dạng—lý tưởng cho khung hình đại diện, bản trình bày thư viện và bố cục nghệ thuật.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học       | Kiểu            | Sự miêu tả                                           |
| ------------- | --------------- | ---------------------------------------------------- |
| mask          | Căn cứ          | Cắt phần tử thành hình dạng mặt nạ CSS               |
| mask-circle   | Phong cách      | Mặt nạ tròn                                          |
| mask-squircle | Phong cách      | Mặt nạ hình tròn (vuông tròn)                        |
| mask-heart    | Phong cách      | Mặt nạ hình trái tim                                 |
| mask-hexagon  | Phong cách      | Mặt nạ hình lục giác                                 |
| mask-pentagon | Phong cách      | Mặt nạ hình ngũ giác                                 |
| mask-diamond  | Phong cách      | Mặt nạ hình kim cương                                |
| mask-star     | Phong cách      | Mặt nạ ngôi sao năm cánh                             |
| mask-star-2   | Phong cách      | Mặt nạ ngôi sao sáu cánh                             |
| mask-triangle | Phong cách      | Mặt nạ hình tam giác                                 |
| mask-half-1   | Công cụ sửa đổi | Nửa bên trái của hình (đối với mặt nạ chia đôi)      |
| mask-half-2   | Công cụ sửa đổi | Nửa bên phải của hình dạng (đối với mặt nạ chia đôi) |

## Cách sử dụng cơ bản

Tạo một mặt nạ hình tròn đơn giản với nền gradient.

## Hình dạng mặt nạ

Áp dụng các hình dạng hình học khác nhau cho các phần tử mặt nạ.

```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>
```

## Kích cỡ mặt nạ

Áp dụng mặt nạ ở các kích cỡ khác nhau để có các tùy chọn bố cục linh hoạt.

```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>
```

## Mặt nạ với các độ chuyển màu khác nhau

Kết hợp các mặt nạ với nhiều hướng và màu sắc gradient khác nhau.

```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>
```

## Mặt nạ có màu đặc

Áp dụng mặt nạ có màu nền đồng nhất cho các thiết kế đơn giản.

```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

Trộn các hình dạng, kích thước và màu sắc khác nhau trong bố cục mặt nạ.

```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>
```