Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Mask Component

CSS-only Tailwind CSS mask for clipping images into shapes — circle, squircle, heart, hexagon, and more. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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
maskBasisKlip elemen ke bentuk topeng CSS
mask-circleGayaMasker melingkar
mask-squircleGayaTopeng tupai (persegi bulat).
mask-heartGayaMasker bentuk hati
mask-hexagonGayaMasker bentuk segi enam
mask-pentagonGayaMasker bentuk pentagon
mask-diamondGayaMasker bentuk berlian
mask-starGayaTopeng bintang berujung lima
mask-star-2GayaTopeng bintang berujung enam
mask-triangleGayaMasker bentuk segitiga
mask-half-1PengubahSetengah bagian kiri bentuk (untuk masker terbelah)
mask-half-2PengubahSetengah bagian kanan bentuk (untuk masker terbelah)

Penggunaan Dasar

Buat topeng melingkar sederhana dengan latar belakang gradien.

1
2
3
<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>

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

Bentuk Topeng

Terapkan bentuk geometris yang berbeda untuk menutupi elemen.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<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 
1
2
3
4
<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 
1
2
3
4
5
6
7
<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>