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

# Mask Component

Komponenty maski nakładają geometryczne lub niestandardowe kształty na obrazy i elementy, tworząc atrakcyjne wizualnie i niepowtarzalne projekty. Zbudowane na podstawie właściwości masek CSS, maski umożliwiają kreatywne kadrowanie obrazu i dekoracyjną stylizację. System masek Frutjam obsługuje wiele kształtów — idealnie nadaje się do ramek awatarów, prezentacji w galeriach i układów artystycznych.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa         | Typ         | Opis                                         |
| ------------- | ----------- | -------------------------------------------- |
| mask          | Opierać     | Przycina element do kształtu maski CSS       |
| mask-circle   | Styl        | Okrągła maska                                |
| mask-squircle | Styl        | Maska Squircle (zaokrąglony kwadrat).        |
| mask-heart    | Styl        | Maska w kształcie serca                      |
| mask-hexagon  | Styl        | Maska w kształcie sześciokąta                |
| mask-pentagon | Styl        | Maska w kształcie pięciokąta                 |
| mask-diamond  | Styl        | Maska w kształcie rombu                      |
| mask-star     | Styl        | Maska z pięcioramienną gwiazdą               |
| mask-star-2   | Styl        | Maska z sześcioramienną gwiazdą              |
| mask-triangle | Styl        | Maska w kształcie trójkąta                   |
| mask-half-1   | Modyfikator | Lewa połowa kształtu (dla masek dzielonych)  |
| mask-half-2   | Modyfikator | Prawa połowa kształtu (dla masek dzielonych) |

## Podstawowe użycie

Utwórz prostą okrągłą maskę z gradientowym tłem.

## Kształty masek

Zastosuj różne kształty geometryczne do elementów maski.

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

## Rozmiary masek

Zastosuj maski w różnych rozmiarach, aby uzyskać elastyczne opcje układu.

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

## Maska z różnymi gradientami

Łącz maski z różnymi kierunkami gradientu i kolorami.

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

## Maska w jednolitych kolorach

W przypadku prostych projektów stosuj maski z jednolitymi kolorami tła.

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

## Połączone warianty

Mieszaj różne kształty, rozmiary i kolory w układach masek.

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