Gerador de CSS Clip-Path
Desenha formas poligonais arbitrárias — incluindo reentrâncias côncavas — arrastando pontos sobre uma caixa de pré-visualização ou sobre a tua própria imagem carregada, e copia o valor CSS clip-path: polygon(...) resultante.
🔒 Processado inteiramente em seu navegador – nada que você digita aqui é carregado.
Resultado
O clip-path do CSS aceita uma função polygon() composta por qualquer número de pares de coordenadas x/y, o que significa que pode recortar uma caixa em formas que vão muito além dos simples retângulos e círculos que a maioria das pessoas utiliza. O problema é que escrever essas coordenadas manualmente é tedioso e quase impossível de acertar para algo além de um triângulo básico — este gerador transforma essa lista de coordenadas num conjunto de pontos móveis sobre uma pré-visualização ao vivo, para que a forma que vês seja sempre a forma que o CSS produz.
Cada ponto na pré-visualização é guardado como uma percentagem da largura e altura da caixa, que é exatamente como o clip-path: polygon() funciona internamente: uma forma construída desta maneira mantém as suas proporções corretas independentemente do tamanho que o elemento venha a ter numa página real, desde uma pequena máscara de ícone até um banner de herói em toda a largura. Arrasta qualquer ponto para remodelar o contorno, clica perto de uma aresta para adicionar um novo ponto exatamente onde clicaste ou faz duplo clique num ponto existente para o apagar — o editor mantém sempre pelo menos três pontos, uma vez que um polígono não pode existir com menos.
As seis predefinições incluídas foram escolhidas para provar que o clip-path consegue fazer mais do que formas convexas: a estrela e a seta dependem ambas de ângulos reflexos que apontam para dentro, o balão de fala recorta uma cauda triangular de um retângulo simples e o talão de bilhete cria duas reentrâncias em arestas opostas, tal como um bilhete perfurado real. Carrega qualquer predefinição e continua a arrastar a partir daí — nada no editor te prende à forma inicial.
Carrega a tua própria imagem para pré-visualizar o clip-path contra conteúdo real em vez de uma caixa lisa, ou salta o upload e a pré-visualização recorre a um padrão listrado para que a forma recortada continue claramente visível de qualquer maneira. Como todas as ferramentas deste site, tudo funciona localmente no navegador: nenhuma imagem sai do teu dispositivo e o gerador continua a funcionar offline depois de a página carregar.