Gerador de Clip Path
Recorte elementos em setas, estrelas, hexágonos ou seus próprios polígonos — arraste pontos na tela e copie o código clip-path.
Arraste pontos para remodelar · duplo clique na tela para adicionar um ponto
Como usar o gerador de Clip Path
- Escolha uma forma predefinida, ou comece arrastando os pontos do pentágono padrão.
- Dê duplo clique em qualquer lugar da tela para inserir um novo ponto na borda mais próxima.
- Selecione um ponto e pressione «Excluir ponto» para removê-lo (mínimo 3 pontos).
- Mude para o modo círculo, elipse ou inset para formas paramétricas com cantos arredondados.
- Copie a declaração clip-path — porcentagens mantêm a forma responsiva em qualquer tamanho.
Sobre este gerador de Clip Path
A propriedade CSS clip-path recorta um elemento numa forma básica — polígono, círculo, elipse ou inset — escondendo tudo que está fora dela. É a maneira padrão de construir layouts não retangulares: divisores de seção em ângulo, grades de imagens hexagonais, setas, balões de fala e avaliações em estrelas, tudo sem imagens ou SVG.
Este editor permite projetar formas visualmente: arraste vértices de polígono na tela, dê duplo clique para adicionar pontos, ou comece com 15 presets afinados à mão. Todas as coordenadas são porcentagens, então suas formas escalam com o elemento. A saída inclui o prefixo -webkit-clip-path para versões antigas do Safari, e uma classe Tailwind de valor arbitrário para projetos utility-first.
FAQ de Clip Path
Como adiciono ou removo pontos do polígono?
Dê duplo clique em qualquer lugar da tela — um novo ponto é inserido na borda mais próxima daquele local. Para remover um ponto, clique nele para selecioná-lo (fica vermelho) e pressione «Excluir ponto». Um polígono sempre mantém pelo menos 3 pontos.
Que sistema de coordenadas o clip-path polygon usa?
Cada ponto é um par x/y medido a partir do canto superior esquerdo do elemento. Este gerador usa porcentagens, então 0% 0% é o canto superior esquerdo e 100% 100% é o inferior direito. Coordenadas em porcentagem escalam automaticamente com o elemento, mantendo sua forma responsiva.
Posso animar um clip-path?
Sim — clip-path é animável em CSS desde que as formas inicial e final sejam do mesmo tipo com o mesmo número de pontos (para polígonos). Projete seus dois estados aqui, mantenha o número de pontos correspondente e transicione entre eles com transition: clip-path .3s.
clip-path afeta elementos filhos e overflow?
clip-path recorta todo o elemento incluindo seus filhos, bordas e até o box-shadow — tudo fora da forma é escondido e não clicável. Se precisar de uma sombra ao redor de uma forma recortada, aplique drop-shadow() como filtro num elemento pai.
Qual a diferença entre clip-path e SVG clipPath?
As formas básicas de clip-path CSS (polígono, círculo, elipse, inset) cobrem a maioria das necessidades de layout com uma única linha de código e são animáveis. SVG clipPath suporta caminhos complexos com curvas — use formas CSS para designs geométricos (esta ferramenta), e SVG quando precisar de curvas bezier.