Máscara CSS Tailwind solo para CSS para recortar imágenes en formas: círculo, ardilla, corazón, hexágono y más. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
Los componentes de máscara aplican formas geométricas o personalizadas a imágenes y elementos, creando interés visual y diseños únicos. Creadas con propiedades de máscara CSS, las máscaras permiten enmarcar imágenes creativas y aplicar estilos decorativos. El sistema de máscaras Frutjam admite múltiples formas, ideal para marcos de avatar, presentaciones de galerías y diseños artísticos.
Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.
| Clase | Tipo | Descripción |
|---|---|---|
| mask | Base | Recorta el elemento a una forma de máscara CSS |
| mask-circle | Estilo | máscara circular |
| mask-squircle | Estilo | Máscara de ardilla (cuadrado redondeado) |
| mask-heart | Estilo | Máscara en forma de corazón |
| mask-hexagon | Estilo | Máscara en forma de hexágono |
| mask-pentagon | Estilo | Máscara en forma de pentágono |
| mask-diamond | Estilo | Máscara en forma de diamante |
| mask-star | Estilo | Máscara de estrella de cinco puntas |
| mask-star-2 | Estilo | Máscara de estrella de seis puntas |
| mask-triangle | Estilo | Máscara en forma de triángulo |
| mask-half-1 | Modificador | Mitad izquierda de la forma (para máscaras divididas) |
| mask-half-2 | Modificador | Mitad derecha de la forma (para máscaras divididas) |
Uso básico
Crea una máscara circular simple con un fondo degradado.
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
Aplica diferentes formas geométricas para enmascarar elementos.
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> |
Tamaños de máscara
Aplique máscaras en diferentes tamaños para obtener opciones de diseño flexibles.
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 con diferentes degradados
Combine máscaras con varias direcciones y colores de degradado.
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 con colores sólidos
Aplique máscaras con colores de fondo sólidos para diseños 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> |
Combined Variants
Mezcle diferentes formas, tamaños y colores en diseños de máscaras.
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 u otro editor de IA?
Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Mascarilla según sea necesario. No más clases alucinadas.