---
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/id/components/mask
---

# Mask Component

Komponen topeng menerapkan bentuk geometris atau khusus pada gambar dan elemen, menciptakan daya tarik visual dan desain unik. Dibuat dengan properti masker CSS, masker memungkinkan pembingkaian gambar kreatif dan gaya dekoratif. Sistem topeng Frutjam mendukung berbagai bentuk—ideal untuk bingkai avatar, presentasi galeri, dan tata letak artistik.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas         | Jenis    | Keterangan                                           |
| ------------- | -------- | ---------------------------------------------------- |
| mask          | Basis    | Klip elemen ke bentuk topeng CSS                     |
| mask-circle   | Gaya     | Masker melingkar                                     |
| mask-squircle | Gaya     | Topeng tupai (persegi bulat).                        |
| mask-heart    | Gaya     | Masker bentuk hati                                   |
| mask-hexagon  | Gaya     | Masker bentuk segi enam                              |
| mask-pentagon | Gaya     | Masker bentuk pentagon                               |
| mask-diamond  | Gaya     | Masker bentuk berlian                                |
| mask-star     | Gaya     | Topeng bintang berujung lima                         |
| mask-star-2   | Gaya     | Topeng bintang berujung enam                         |
| mask-triangle | Gaya     | Masker bentuk segitiga                               |
| mask-half-1   | Pengubah | Setengah bagian kiri bentuk (untuk masker terbelah)  |
| mask-half-2   | Pengubah | Setengah bagian kanan bentuk (untuk masker terbelah) |

## Penggunaan Dasar

Buat topeng melingkar sederhana dengan latar belakang gradien.

## Bentuk Topeng

Terapkan bentuk geometris yang berbeda untuk menutupi elemen.

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

## Ukuran Masker

Terapkan masker dengan ukuran berbeda untuk opsi tata letak yang fleksibel.

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

## Topeng dengan Gradien Berbeda

Kombinasikan masker dengan berbagai arah gradien dan warna.

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

## Masker dengan Warna Solid

Terapkan masker dengan warna latar belakang solid untuk desain sederhana.

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

## Varian Gabungan

Campurkan berbagai bentuk, ukuran, dan warna dalam tata letak topeng.

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