✂️ Dev

Gerador de Clip-Path CSS

Crie formas CSS com clip-path: polígonos, círculos, elipses e insets. Selecione presets (estrela, hexágono, seta, chevron) e copie o código pronto. Tudo no navegador.

Forma (preset)

CSS

O que é clip-path?

clip-path recorta um elemento em uma forma personalizada usando coordenadas (polygon()), círculo, elipse ou inset. Apenas a área dentro da forma fica visível — o restante do elemento é cortado.

Útil para criar headers diagonais, cards com cantos cortados, balões, setas e ícones complexos sem precisar de SVG ou imagens. Tudo no navegador.

Formas de clip-path prontas para copiar

Você precisa de um card hexagonal, de uma seta ou de um canto cortado, e a ideia de escrever um polygon() ponto a ponto desanima na hora. Esta página resolve o caso comum: escolha uma das dezenove formas prontas, de triângulo e estrela a chevron e balão de mensagem, veja o recorte aplicado num quadrado de exemplo e copie o CSS com clip-path e -webkit-clip-path já preenchidos.

Os polígonos saem com coordenadas em porcentagem, então a mesma forma funciona num avatar de 40px e num banner de tela cheia sem mudar nada. Vale saber que o recorte é só visual até certo ponto: o elemento continua ocupando o retângulo original no layout, mas a área cortada deixa de receber cliques. Círculo, elipse e inset têm controles próprios de raio e margens; o inset ainda aceita cantos arredondados, que a ferramenta emite com a palavra-chave round.

Aqui não dá para arrastar vértices nem criar polígono ponto a ponto: a ferramenta trabalha com presets. Se a forma precisa de ajuste fino, copie o código e edite os pares de porcentagem direto no seu CSS, que o formato é legível. Repare também que o corte leva junto tudo que o elemento pinta, inclusive box-shadow; para sombra acompanhando a forma, use filter: drop-shadow() num elemento pai. Tudo roda no navegador, sem enviar nada a servidor.

Perguntas frequentes

Dá para editar os pontos do polígono nesta página?

Não, a ferramenta é baseada em formas prontas. O código gerado, porém, é um polygon() com pares de porcentagem fáceis de ler; copie e ajuste os números no seu editor até a forma ficar do jeito que você quer.

Por que o código vem com -webkit-clip-path junto?

Versões antigas de Safari e iOS só entendiam a propriedade com prefixo. Nos navegadores atuais a linha extra é redundante, mas não atrapalha; se o seu público usa só browser moderno, pode apagar.

O clip-path corta a sombra do elemento também?

Corta. Box-shadow, borda e fundo são pintados pelo elemento e somem fora da forma. Para uma sombra que siga o recorte, aplique filter: drop-shadow() num contêiner por fora do elemento recortado.

Ferramentas Relacionadas

⬜

Gerador de Border Radius CSS

Crie formas arredondadas customizadas com 8 controles independentes (4 cantos × 2 eixos). Veja o preview em tempo real e copie o CSS pronto. Tudo no navegador.

🔲

Gerador de CSS Grid

Crie layouts em CSS Grid visualmente: defina linhas, colunas, gaps e justificações. Veja o preview e copie o CSS pronto. Tudo no navegador.

📐

Calculadora de Clamp CSS

Gere valores CSS clamp() para tipografia e espaçamentos fluidos. Informe os tamanhos mínimo/máximo e as larguras de viewport — o resultado é o clamp() pronto para colar no CSS.