Gerador de clip-path CSS

O que é Gerador de clip-path CSS?

O gerador de clip-path CSS é um editor visual gratuito para a propriedade CSS clip-path, feito para desenvolvedores front-end e designers que querem recortar elementos em formas não retangulares. Escolha um preset no menu suspenso: circle() e ellipse() com um raio e um ponto central, polygon() com quantos vértices você precisar, inset() com quatro deslocamentos de borda, ou uma variante de inset() arredondado com um raio de canto. Cada parâmetro é uma porcentagem informada por um campo numérico, e uma caixa de prévia com fundo quadriculado revela a forma resultante em tempo real. O CSS clip-path completo é gerado para você copiar. Use-o para mascarar imagens, criar divisores de seção diagonais, montar avatares hexagonais ou recortar formas de balão de fala sem contar coordenadas na mão.

Como usar Gerador de clip-path CSS

1. Escolha uma forma no menu suspenso de presets: círculo, elipse, polígono, inset ou arredondado.
2. Para círculo ou elipse, defina o raio (ou os raios X/Y) e a posição central X/Y em porcentagem.
3. Para polígono, edite o X e o Y de cada vértice em porcentagem; clique em Adicionar ponto para incluir mais vértices e reordene editando os valores.
4. Para inset ou arredondado, defina os deslocamentos superior, direito, inferior e esquerdo; o arredondado também recebe um raio de canto.
5. Veja a prévia ao vivo recortar a caixa enquanto você digita.
6. Copie o CSS clip-path gerado e cole na sua folha de estilo.

Exemplos

Preset círculo, raio 50%, centro 50% 50%

clip-path: circle(50% at 50% 50%);

Preset polígono, pontos (50,0) (100,100) (0,100)

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

Preset arredondado, inset 10% em todos os lados, raio de canto 20%

clip-path: inset(10% 10% 10% 10% round 20%);

Perguntas frequentes

Para que serve o clip-path?

A propriedade CSS clip-path recorta um elemento em uma forma básica, de modo que apenas a área dentro da forma permanece visível. É ótima para avatares circulares, cortes de seção diagonais, grades hexagonais, máscaras de imagem e balões de fala — tudo sem imagens ou arquivos SVG extras.

Como funciona o preset de polígono?

polygon() desenha uma forma conectando uma lista de vértices X/Y em ordem. Edite os valores em porcentagem de cada ponto e use Adicionar ponto para inserir mais vértices; o último ponto se conecta automaticamente de volta ao primeiro. Um mínimo de três pontos é mantido para que a forma continue válida.

Por que os valores estão em porcentagem?

As porcentagens fazem o recorte escalar junto com o elemento, então o mesmo clip-path funciona em qualquer tamanho. 0% é a borda esquerda ou superior e 100% é a borda direita ou inferior da caixa do elemento.

O que o preset arredondado acrescenta?

O preset arredondado usa inset() com um raio de canto round, produzindo um retângulo recortado para dentro em cada lado e com cantos arredondados — útil para recortes emoldurados e suaves que um border-radius simples não consegue combinar com um recorte inset.

Meus dados são enviados para algum lugar?

Não. O gerador roda inteiramente no seu navegador com JavaScript — seus valores de forma nunca saem do seu dispositivo, então ele funciona de forma privada e até offline depois que a página carrega.