Gerador de clip-path
Recorte elementos em formas — escolha um polígono predefinido e arraste os pontos ou use círculo, elipse e inset.
As coordenadas são convertidas para objectBoundingBox (0–1), então o recorte acompanha qualquer elemento. Formas como <polygon>, <rect> e <circle> viram paths automaticamente, e as transformações são incorporadas às coordenadas.
Arraste os pontos na prévia para mudar a forma do polígono.
Como o gerador de clip-path funciona
Crie formas de clip-path visualmente com polígonos predefinidos e pontos arrastáveis e copie CSS responsivo em porcentagem.
Biblioteca de predefinições
Doze polígonos predefinidos — triângulos, setas, estrelas, balões de mensagem — além das formas básicas círculo, elipse e inset. Comece por algo próximo da forma de que você precisa.
Pontos arrastáveis
Cada vértice do polígono é uma alça na prévia ao vivo. Arraste para mudar a forma, adicione pontos intermediários para mais detalhes e remova os que não precisar — o CSS se atualiza enquanto você move.
Prévia com “fantasma”
A área recortada continua visível como um “fantasma” translúcido, então você sempre vê o que a forma está cortando do elemento original.
Coordenadas em porcentagem
Todas as coordenadas são em porcentagem, então o mesmo clip-path se adapta a elementos de qualquer tamanho — imagens hero, cards ou seções de largura total.
Perguntas frequentes
O clip-path define a região visível de um elemento — tudo o que fica fora da forma é ocultado. Funciona em qualquer elemento, inclusive imagens e vídeos, e afeta a detecção de cliques: cliques fora da forma passam direto.
Coordenadas em porcentagem são relativas à caixa do elemento, então um único valor funciona em qualquer tamanho e continua responsivo. Coordenadas em pixels quebrariam assim que o elemento mudasse de tamanho.
Sim — transições entre dois polígonos com o mesmo número de pontos são animadas com suavidade e, nos navegadores modernos, rodam no compositor. É a base de efeitos de revelação e de formas que se transformam.
O clip-path é uma forma vetorial de bordas definidas; o mask-image aceita gradientes de transparência suaves e imagens. Para recortes geométricos nítidos, o clip-path é mais simples e mais leve.