Gerador de Clip Path
Projete clip-paths CSS complexos visualmente.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);- Clique e arraste para remodelar
- Use predefinições para formas rápidas
- Experimente o modo 'polygon' para formas personalizadas
Ferramentas recomendadas
Utilitários selecionados que você pode achar úteis
Recortar formas personalizadas com CSS clip-path
Visão Geral
A propriedade CSS clip-path permite recortar um elemento numa forma personalizada — triângulo, hexágono, seta, blob ou qualquer polígono — sem editar imagens. É um jeito poderoso de adicionar design não retangular sem arquivos extras. Como escrever as coordenadas à mão é chato, este gerador de clip-path deixa você arrastar pontos visualmente e copia o CSS exato, tudo no navegador.
Como usar (passo a passo)
- 1
Escolha ou desenhe uma forma
Comece de um preset (triângulo, hexágono, círculo) ou coloque pontos para definir um polígono personalizado.
- 2
Arraste os pontos
Mova os cantos na prévia ao vivo até a forma ficar boa.
- 3
Copie o CSS de clip-path
Cole o valor de clip-path gerado no seu elemento para recortá-lo naquela forma.
Como Funciona
Você escolhe ou desenha uma forma e a ferramenta a define com clip-path — geralmente um polygon() de coordenadas em porcentagem, ou um preset como circle() ou ellipse(). Tudo fora da forma fica transparente, então o elemento aparece só dentro do contorno. Você arrasta os pontos numa prévia ao vivo e a ferramenta escreve o valor de clip-path correspondente para colar em qualquer elemento.
Quando usar
Recortar uma imagem ou seção numa forma angulada ou geométrica. Criar um divisor diagonal entre seções de página. Fazer um avatar ou selo hexagonal. Adicionar uma seta ou balão de fala a um destaque. Desenhar um hero ou card não retangular. Aprender como as coordenadas de um polígono mapeiam para uma forma visível.
Perguntas Frequentes
É recortada — fica totalmente transparente e não interativa, então os cliques a atravessam. O elemento só aparece e responde dentro do contorno da forma; a caixa de layout subjacente ainda ocupa seu espaço original.
Notas Importantes
clip-path recorta visualmente, mas a caixa do elemento ainda ocupa todo o seu espaço retangular no layout, o que pode causar sobreposições ou surpresas de espaçamento. Além disso, o conteúdo recortado é ocultado, não removido — não confie nisso para esconder informação sensível.