Gerador de clip-path CSS
Crie formas CSS clip-path: polígonos com pontos arrastáveis e predefinições, círculo, elipse e inset com cantos arredondados. Prévia ao vivo e código para copiar.
Forma
Configurações da forma
Arraste as alças na pré-visualização ou digite valores exatos.
Pré-visualização
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Ferramentas Relacionadas
Ver TodasO que é Gerador de clip-path?
Desenha formas clip-path visualmente. Os polígonos podem ser editados arrastando pontos na prévia ou digitando porcentagens exatas, com predefinições que vão de triângulos a estrelas e balões de fala; formas de círculo, elipse e inset são ajustadas com controles deslizantes.
Como usar Gerador de clip-path
- Escolha uma forma: Polígono, Círculo, Elipse ou Inset.
- Para polígonos, escolha uma predefinição e depois arraste as alças ou digite a porcentagem X/Y de cada ponto; use Adicionar ponto / Remover ponto.
- Para círculo e elipse, defina o raio e o centro; para inset, defina topo, direita, base, esquerda e um raio de canto opcional.
- Ative a exibição da área recortada para ver o que é cortado.
- Copie o código CSS.
Exemplo
Hexagon preset with point 1 moved to X 20%
clip-path: polygon(20% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Quando usar Gerador de clip-path
Use clip-path para formas decorativas em imagens, bordas inclinadas de seções, avatares hexagonais e animações de revelação (o clip-path pode ser animado entre formas com o mesmo número de pontos). O conteúdo fora da forma fica oculto e não recebe cliques. Para retângulos arredondados, prefira border-radius; para formas que o texto deve contornar, use shape-outside.
Como funciona Gerador de clip-path
As coordenadas são porcentagens da caixa de borda do elemento, medidas a partir do canto superior esquerdo. Polígonos são escritos como polygon(x% y%, …) na ordem dos pontos, círculos como circle(r% at x% y%), elipses como ellipse(rx% ry% at x% y%) e insets como inset(top right bottom left round r), com os quatro deslocamentos encurtados como na forma abreviada de margin. Adicionar ponto insere um novo ponto no meio do caminho entre o ponto selecionado e o seguinte.
Casos de Uso Comuns
- Avatares em forma de hexágono ou estrela
- Bordas inclinadas em seções de destaque
- Indicadores de etapas em forma de seta e chevron
- Cards em formato de balão de fala
- Animações de hover com transformação de forma
Perguntas Frequentes
Preciso de -webkit-clip-path?
Não para formas básicas nos navegadores atuais; o Safari suporta a propriedade sem prefixo desde a versão 13.1.
Posso animar o clip-path?
Sim, com transition ou keyframes, desde que as duas formas sejam do mesmo tipo e os polígonos tenham o mesmo número de pontos.
Por que não consigo clicar na parte oculta do elemento?
O clip-path também recorta a detecção de cliques: as áreas fora da forma não são clicáveis.