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

# Mask Component

Maske bileşenleri görüntülere ve öğelere geometrik veya özel şekiller uygulayarak görsel ilgi ve benzersiz tasarımlar yaratır. CSS maskesi özellikleriyle oluşturulan maskeler, yaratıcı görüntü çerçeveleme ve dekoratif stil oluşturma olanağı sağlar. Frutjam maske sistemi birden fazla şekli destekler; avatar çerçeveleri, galeri sunumları ve sanatsal düzenler için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf         | Tip         | Tanım                                      |
| ------------- | ----------- | ------------------------------------------ |
| mask          | Temel       | Öğeyi bir CSS maskesi şekline klipsler     |
| mask-circle   | Stil        | Dairesel maske                             |
| mask-squircle | Stil        | Sincap (yuvarlak kare) maskesi             |
| mask-heart    | Stil        | Kalp şekli maskesi                         |
| mask-hexagon  | Stil        | Altıgen şekilli maske                      |
| mask-pentagon | Stil        | Beşgen şekilli maske                       |
| mask-diamond  | Stil        | Elmas şekli maskesi                        |
| mask-star     | Stil        | Beş köşeli yıldız maskesi                  |
| mask-star-2   | Stil        | Altı köşeli yıldız maskesi                 |
| mask-triangle | Stil        | Üçgen şekli maskesi                        |
| mask-half-1   | Değiştirici | Şeklin sol yarısı (bölünmüş maskeler için) |
| mask-half-2   | Değiştirici | Şeklin sağ yarısı (bölünmüş maskeler için) |

## Temel Kullanım

Degrade arka plana sahip basit bir dairesel maske oluşturun.

## Maske Şekilleri

Maske elemanlarına farklı geometrik şekiller uygulayı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>
```

## Maske Boyutları

Esnek düzen seçenekleri için farklı boyutlarda maskeler uygulayın.

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

## Farklı Degradelere Sahip Maske

Maskeleri çeşitli degrade yönleri ve renklerle birleştirin.

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

## Düz Renklerle Maske

Basit tasarımlar için düz arka plan renklerine sahip maskeler uygulayı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>
```

## Kombine Varyantlar

Maske düzenlerinde farklı şekilleri, boyutları ve renkleri karıştırı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>
```