Softonic

Gerador de Clip Path CSS

Etapa 1 / 2
Próximo

Com clip-path, você pode recortar qualquer elemento em formato de polígono, criando imagens recortadas, seções assimétricas ou balões de fala sem sobreposições de SVG. Escrever as coordenadas de polygon() manualmente é um convite a erros de cálculo. Este gerador emite a declaração clip-path correta para quatro formas predefinidas: triângulo, losango, trapézio e hexágono. Escolha uma forma, gere o código e copie-o.

Como criar um clip-path

  1. 1

    Escolha a forma

    Escolha uma das quatro formas predefinidas: triângulo, losango, trapézio ou hexágono.

  2. 2

    Gere o CSS

    Clique no botão e a ferramenta monta a regra `clip-path: polygon(...)` para a forma selecionada.

  3. 3

    Copie a regra

    Copie o resultado e cole na sua folha de estilos. Os percentuais mantêm a forma responsiva ao tamanho do elemento.

  4. 4

    Leia as coordenadas

    Cada par de números é um vértice: a posição x e y daquele canto como percentual da caixa do elemento.

  5. 5

    Aplique

    `clip-path` funciona em qualquer elemento em todos os navegadores modernos, e a forma se adapta ao tamanho do elemento.

As cinco funções de forma

Função Sintaxe Uso
inset() inset(10% 20% 10% 20% round 8px) Recorte retangular com insets e cantos arredondados opcionais
circle() circle(50% at 50% 50%) Círculo
ellipse() ellipse(40% 25% at 50% 50%) Elipse
polygon() polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) Qualquer polígono
path() path("M0 0 L100 0 L50 100 Z") Dados de caminho SVG (suporte limitado)

Recortes de polígono comuns

/* Hexágono */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Losango */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / seta apontando para a direita */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Paralelogramo */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Corte diagonal (seção hero moderna) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

A diagonal da seção hero é provavelmente a mais usada de todas, ela dá a uma seção aquele visual moderno angulado sem qualquer SVG.

Animando clip-path

Clip-path anima desde que ambos os estados tenham a mesma função de forma com o mesmo número de pontos. Um polígono de 4 vértices anima suavemente para outro polígono de 4 vértices; adicionar ou remover vértices quebra a interpolação.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

Use isso para efeitos de revelação, distorções sutis ao passar o mouse ou transições de página.

Clip-path vs. overflow: hidden

overflow: hidden recorta para o retângulo da border-box (que pode ser arredondado com border-radius). clip-path recorta para qualquer forma que você definir e recorta tudo, incluindo sombras e contornos. Se você precisar que as sombras permaneçam visíveis fora da forma, clip-path não é o que você quer.

filter: drop-shadow() pode re-adicionar uma sombra que segue a forma nos elementos clip-path, mas é mais lento.

Desempenho

Clip-path é acelerado por GPU em navegadores modernos, então clip-paths animados são suaves. A exceção é path() e polígonos muito complexos (40+ vértices) que voltam para a renderização por CPU em alguns navegadores.

Acessibilidade

Clip-path apenas muda o que é visível. Leitores de tela, foco por teclado e eventos de ponteiro seguem a caixa completa do elemento, não a forma recortada. Se uma imagem é recortada em uma estrela, o texto alternativo é lido normalmente. Se um botão é recortado em um chevron, seu alvo de clique é o retângulo completo, não o chevron visível, o que pode causar cliques acidentais em espaços aparentemente vazios.

Para botões com formas recortadas incomuns, defina a largura/altura do elemento de forma justa para que a área de clique corresponda razoavelmente bem à área visível.

Perguntas frequentes

Todos os navegadores modernos (Chrome, Firefox, Safari, Edge) suportam polygon(), circle(), ellipse() e inset(). path() é suportado no Chrome 88+, Firefox 97+ e Safari 13.1+. IE não suporta nada disso, mas seu uso está abaixo do limite para a maioria dos sites agora.

Porque clip-path recorta sombras junto com tudo o mais. Use filter: drop-shadow() em vez disso, ele segue a forma recortada e mantém a sombra visível.

Apenas entre a mesma função de forma com o mesmo número de pontos. Um polígono com 4 pontos anima para outro polígono com 4 pontos. Adicionar ou remover pontos, ou mudar entre funções (polígono para círculo), quebra a interpolação.

Não, eventos de ponteiro ainda vão para o retângulo completo do elemento. Um botão em forma de estrela tem uma área de clique retangular, incluindo os cantos transparentes. Considere pointer-events: none em um ::before ou use elementos de tamanho justo se isso for importante.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.

Gerador de Papel de Parede em Gradiente

Gere papéis de parede em gradiente borrados de três cores para laptop, telefone ou fundos do Zoom. Randomize ou defina o ângulo e o desfoque manualmente.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Ferramenta disponível em outros idiomas