Gerador de CSS Clip-Path

Crie formas CSS clip-path visualmente

A propriedade clip-path permite recortar um elemento em praticamente qualquer forma usando apenas CSS. Avatares hexagonais, bordas de seção inclinadas, botões em forma de seta e balões de fala podem ser feitos sem imagens nem marcação extra. No entanto, escrever coordenadas de polígonos à mão é trabalhoso. Este gerador oferece uma pré-visualização em tempo real com alças arrastáveis, para que possa moldar o elemento e copiar a declaração final.

Polígonos, círculos, elipses e insets

A ferramenta suporta as principais funções de formas básicas. polygon() recebe uma lista de pontos escritos como percentagens de x e y, o que é ideal para triângulos, trapézios, estrelas e setas. circle() e ellipse() recebem um raio e uma posição central, e inset() recorta para dentro a partir de cada borda da caixa, com um raio opcional para cantos arredondados. Escolha uma predefinição como ponto de partida e refine-a. Nos polígonos, arraste qualquer alça para mover um vértice, ou dê foco a uma alça e use as teclas de seta para passos precisos de um por cento, mantendo Shift pressionado para saltos maiores.

Dicas para usar clip-path

Como todos os valores são percentagens, a forma acompanha o tamanho do elemento, o que a torna muito adequada para layouts responsivos. Lembre-se de que clip-path afeta apenas a pintura: bordas e box-shadows fora da forma também são recortadas, por isso use um elemento envolvente com filter: drop-shadow() se precisar de uma sombra que siga a forma. Também é possível animar a transição entre dois polígonos com o mesmo número de pontos usando transições CSS, para obter efeitos de morphing suaves. O código gerado é uma única linha que pode ser colada em qualquer folha de estilos, e toda a edição acontece localmente no navegador.