마스크 구성요소
이미지를 원, 물결 모양, 하트, 육각형 등의 모양으로 자르기 위한 CSS 전용 Tailwind CSS 마스크입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
Mask components apply geometric or custom shapes to images and elements, creating visual interest and unique designs. Built with CSS mask properties, masks enable creative image framing and decorative styling. The Frutjam mask system supports multiple shapes—ideal for avatar frames, gallery presentations, and artistic layouts.
CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.
| Class | 타입 | Description |
|---|---|---|
| mask | Base | Clips element to a CSS mask shape |
| mask-circle | Style | Circular mask |
| mask-squircle | Style | Squircle (rounded square) mask |
| mask-heart | Style | Heart shape mask |
| mask-hexagon | Style | Hexagon shape mask |
| mask-pentagon | Style | Pentagon shape mask |
| mask-diamond | Style | Diamond shape mask |
| mask-star | Style | Five-pointed star mask |
| mask-star-2 | Style | Six-pointed star mask |
| mask-triangle | Style | Triangle shape mask |
| mask-half-1 | Modifier | Left half of the shape (for split masks) |
| mask-half-2 | Modifier | Right half of the shape (for split masks) |
Basic Usage
Create a simple circular mask with a gradient background.
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> |
Mask Shapes
Apply different geometric shapes to mask elements.
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> |
Mask Sizes
Apply masks at different sizes for flexible layout options.
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> |
Mask with Different Gradients
Combine masks with various gradient directions and colors.
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> |
Mask with Solid Colors
Apply masks with solid background colors for simple designs.
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> |
Combined Variants
Mix different shapes, sizes, and colors in mask layouts.
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> |