◇

Gerador de clip-path CSS

Recorte um elemento em formas comuns e copie o CSS de clip-path.

Seus arquivos ficam neste dispositivo

Os arquivos são processados no navegador, nunca enviados. O site baixa o código e os recursos necessários. Sem contas ou rastreadores.

Use Baixar para salvar esta ferramenta em um único arquivo HTML para uso offline.

Privacidade →

Forma

saída

Experimente um exemplo resolvido

Exemplo

Escolha a forma hexágono para obter clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);. Cada par é uma posição x e y dentro do elemento, então a forma acompanha a largura e a altura do elemento.

Lembre-se

O recorte esconde parte do elemento, mas mantém a caixa do layout: os vizinhos não se movem e os cantos escondidos deixam de receber cliques. Bordas e sombras de caixa também são recortadas; para ter sombra, aplique um filtro drop-shadow em um contêiner.

Sobre esta ferramenta

Escolha uma forma e recorte instantaneamente uma caixa de visualização com a regra clip-path correspondente, depois copie o CSS pronto para usar. A visualização é atualizada em tempo real, totalmente no seu navegador.

Perguntas frequentes

Como funcionam os clip-paths de polígono?

Cada ponto é um par de porcentagens x y relativo à caixa; o navegador os conecta em ordem e mostra apenas a área dentro do contorno.

Todos os navegadores oferecem suporte a clip-path?

As formas polygon, circle, ellipse e inset têm suporte em todos os navegadores modernos, então o CSS gerado funciona sem prefixos.