Gerador de caminho de clipe
Crie formas de clip-path CSS visualmente - sem adivinhação manual de coordenadas. Escolha entre 12 predefinições, arraste pontos poligonais na visualização ao vivo e copie o CSS com um clique.
Shape Presets
Live Preview
Drag the dots to reshape. Click + on edges to add points.
Shape Controls
Drag the colored dots on the preview to reshape. 4 points
CSS Output
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
Browser support:clip-path is supported in all modern browsers (Chrome, Firefox, Safari 15.4+, Edge). For older Safari (<15.4), use the -webkit-clip-path prefix.
Características
- Arrastar para editar: arraste pontos poligonais diretamente na visualização para remodelar em tempo real. Não há necessidade de adivinhar as coordenadas - veja exatamente como fica o caminho do clipe conforme você o ajusta.
- 12 formas predefinidas: comece com formas comuns: círculo, triângulo, diamante, hexágono, estrela, coração e muito mais. Cada predefinição é ajustada para o melhor ponto de partida, pronta para ser personalizada ainda mais.
- Saída CSS instantânea: copie o valor do clip-path CSS ou a declaração completa com um clique. Todos os navegadores modernos são suportados sem a necessidade de prefixos de fornecedor.
- Funciona off-line: todo o processamento acontece no seu navegador - sem viagens de ida e volta ao servidor. A ferramenta funciona mesmo sem conexão com a internet depois que a página é carregada.
Casos de uso
- Corte criativo de imagens: recorte imagens em formas personalizadas - losangos, hexágonos, estrelas ou polígonos - para obter miniaturas exclusivas de portfólio, grades de galeria e visuais de seção de heróis.
- Animações de paralaxe e rolagem: adicione transições de caminho de clipe para revelar elementos conforme os usuários rolam. Anime entre formas poligonais para obter efeitos suaves e modernos acionados por rolagem.
- Divisores de cartão e seção: use caminhos de corte diagonais ou curvos para criar divisores de seção entre blocos de páginas. Melhor que as transformações CSS para manter o layout responsivo.
- Molduras de perfil e avatar: corte fotos de perfil de usuário em círculos, hexágonos ou molduras poligonais personalizadas para páginas de equipe, recursos sociais e diretórios de usuários.
- Design de herói e página de destino: crie seções de herói atraentes com divisões diagonais, formas sobrepostas e caminhos de clipe assimétricos que guiam o olhar pela página.
- Ativos geométricos da marca: crie formas geométricas consistentes para ilustrações de marca, planos de fundo de ícones e elementos decorativos que correspondam à identidade de sua marca.
Perguntas frequentes
O clip-path CSS é usado para recortar (ocultar) partes de um elemento para que apenas uma forma específica fique visível. Os usos comuns incluem: cortar imagens em formas personalizadas (círculos, polígonos, estrelas), criar divisores de seção diagonal, animar transições de páginas, fazer revelações com efeito de foco e construir elementos de design geométrico sem SVG ou recursos de imagem.
Sim! clip-path é uma propriedade animável. Você pode usar transições CSS ou @keyframes para animar entre valores de clip-path. Para uma transformação suave, certifique-se de que ambos os estados usem a mesma função de forma com o mesmo número de pontos (por exemplo, polígono com 6 pontos se transformando em outro polígono com 6 pontos). A animação entre diferentes tipos de formas (círculo a polígono) pode não interpolar suavemente em todos os navegadores.
A propriedade clip mais antiga (obsoleta) só funcionava com elementos posicionados de forma absoluta e aceitava uma forma rect(). clip-path é o substituto moderno que suporta formas Circle(), ellipse(), inset(), polygon() e path(), funciona com qualquer elemento posicionado e é totalmente animável. Sempre use clip-path para novos projetos.
Para uma animação suave de polígono a polígono, ambos os polígonos devem ter o mesmo número de pontos. O navegador interpola a posição de cada ponto de forma independente. Por exemplo, um hexágono de 6 pontas pode se transformar suavemente em uma estrela de 6 pontas. Se a contagem de pontos for diferente, a animação será ajustada em vez de se transformar suavemente.
A função path() aceita dados de caminho SVG (sintaxe de atributo d) para criar formas de recorte totalmente personalizadas. Por exemplo: clip-path: path('M 50 0 L 100 50 L 50 100 L 0 50 Z'); cria um diamante. Isso oferece possibilidades ilimitadas de formas além do que o círculo/elipse/inserção/polígono pode criar. Nota: path() requer Safari 15.4+.
Não - o clip-path afeta apenas a renderização visual do elemento. A caixa delimitadora original do elemento ainda ocupa o mesmo espaço no layout da página. Os eventos (clique, passar o mouse) só serão acionados dentro da área recortada visível na maioria dos navegadores modernos. Para um layout verdadeiramente não retangular, considere usar formas CSS ou formas externas.
Para polígono, círculo, elipse e inserção: nenhum prefixo é necessário em navegadores modernos (Chrome 55+, Firefox 54+, Safari 11+, Edge 79+). Para path(): Safari 15.4+ sem prefixo. Para navegadores muito antigos, você pode usar -webkit-clip-path como substituto. A ferramenta gera clip-path padrão sem prefixo que funciona em todos os navegadores atuais.
Sim! clip-path pode ser aplicado a qualquer elemento HTML, incluindo texto. Você pode recortar o texto em formas específicas - mas o texto em si é recortado, não refluído. Para texto que segue um caminho ou forma, use formas CSS com shape-outside. Um uso popular é a criação de animações de revelação somente de texto com transformação de caminho de clipe.