Como usar: Máscara de Forma em Imagem
- Escolha uma forma — as mesmas do gerador de clip-path, mais um coração.
- Aumente o Feather para uma borda suave, ou deixe em 0 para um recorte nítido.
- Altere o Tamanho para reduzir a forma dentro do elemento e experimente Usar minha imagem.
- Copie o CSS — a forma é um SVG inline, então não é preciso nenhum arquivo extra.
Máscaras de forma vs. clip-path
O clip-path faz um recorte nítido de uma forma e é a opção mais simples quando você precisa de bordas definidas. Uma máscara de forma usa um SVG como mask-image: pode ter bordas suaves e esfumadas, pode ser escalada com mask-size e posicionada com mask-position, e funciona com qualquer forma SVG — até com o seu próprio logo (escolha “Minha imagem ou SVG como máscara”).
Para formas de bordas definidas com pontos arrastáveis, use o Gerador de Clip-path; para formas orgânicas, o Gerador de Blob SVG.
Também pesquisado como: css imagem com forma, mask image css forma, imagem em formato de coração css, imagem em formato de estrela css, imagem hexágono css, recorte de forma css, css mask svg forma.
Ferramentas que combinam com: Máscara de Forma em Imagem
- Gerador de Máscara CSS — Faça imagens e seções desaparecerem gradualmente em vez de terminarem de forma abrupta: esmaeça uma borda, topo e base, as quatro bordas, uma vinheta radial ou um spotlight, corte o elemento em listras — ou aplique uma máscara com um formato (estrela, coração, hexágono, seta…) com bordas suaves e esfumadas, o que o clip-path não consegue.
- Efeito Fade nas Bordas de Imagem com CSS — Dê às fotos e imagens de destaque bordas suaves e esmaecidas com uma única regra CSS — sem editar a imagem.
- Gerador de Border Radius — Arredonde os cantos de qualquer caixa: arraste um controle deslizante para todos os cantos ou defina cada canto separadamente, mude para cantos elípticos para criar formas de blob e folha e copie o CSS border-radius válido mais curto.
- Gerador de Triângulo CSS — Crie um triângulo só com CSS para a seta de um tooltip, o caret de um dropdown ou um balão de fala: escolha uma das 8 direções, a largura, a altura e a cor, e copie o truque do border clássico ou a versão mais simples com clip-path.
Perguntas frequentes
Como coloco uma imagem dentro de um formato de coração ou estrela?
Escolha a forma aqui e copie o CSS: ele define um SVG inline da forma como mask-image na sua imagem, então só aparece o interior da forma.
A forma pode ter bordas suaves?
Sim — aumente o Feather. A forma SVG fica desfocada, então a imagem desaparece gradualmente na borda. O clip-path não faz isso; ele sempre cria bordas nítidas.
Posso usar minha própria forma ou logo?
Sim — escolha “Minha imagem ou SVG como máscara” e envie um PNG com transparência ou um SVG.
Posso instalar o Máscara de Forma em Imagem como um aplicativo da web e usá-lo offline?
Sim. O Máscara de Forma em Imagem é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.