Máscara CSS Tailwind somente CSS para recortar imagens em formas - círculo, esquilo, coração, hexágono e muito mais. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Os componentes da máscara aplicam formas geométricas ou personalizadas a imagens e elementos, criando interesse visual e designs exclusivos. Construídas com propriedades de máscara CSS, as máscaras permitem enquadramento de imagem criativo e estilo decorativo. O sistema de máscara Frutjam oferece suporte a vários formatos, ideal para molduras de avatar, apresentações em galerias e layouts artísticos.
Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.
| Aula | Tipo | Descrição |
|---|---|---|
| mask | Base | Recorta o elemento em uma forma de máscara CSS |
| mask-circle | Estilo | Máscara circular |
| mask-squircle | Estilo | Máscara de esquilo (quadrado arredondado) |
| mask-heart | Estilo | Máscara em forma de coração |
| mask-hexagon | Estilo | Máscara em forma de hexágono |
| mask-pentagon | Estilo | Máscara em formato de pentágono |
| mask-diamond | Estilo | Máscara em forma de diamante |
| mask-star | Estilo | Máscara de estrela de cinco pontas |
| mask-star-2 | Estilo | Máscara de estrela de seis pontas |
| mask-triangle | Estilo | Máscara em forma de triângulo |
| mask-half-1 | Modificador | Metade esquerda da forma (para máscaras divididas) |
| mask-half-2 | Modificador | Metade direita da forma (para máscaras divididas) |
Uso Básico
Crie uma máscara circular simples com fundo gradiente.
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> |
Formas de máscara
Aplique diferentes formas geométricas aos elementos da máscara.
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> |
Tamanhos de máscara
Aplique máscaras em tamanhos diferentes para opções de layout flexíveis.
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> |
Máscara com diferentes gradientes
Combine máscaras com várias direções e cores de gradiente.
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> |
Máscara com Cores Sólidas
Aplique máscaras com cores de fundo sólidas para designs simples.
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> |
Variantes Combinadas
Misture diferentes formas, tamanhos e cores em layouts de máscara.
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> |
Usando Claude Code, Cursor ou outro editor de IA?
Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Máscara e a estrutura sob demanda. Chega de aulas alucinadas.