Gerador de Clip-Path CSS
Este gerador de clip-path CSS permite criar formas com clip-path de forma visual, em vez de escrever pares de coordenadas na mão. Arraste os pontos em uma tela interativa, veja a forma atualizar em tempo real e copie o CSS gerado direto para a sua folha de estilos.
Ele oferece suporte a todas as quatro funções de forma do clip-path — polygon, circle, ellipse e inset — e já vem com 28 predefinições prontas. Foi feito para desenvolvedores front-end que criam interfaces não retangulares, designers web que modelam seções de destaque e máscaras de imagem, e para quem está aprendendo como os valores de clip-path realmente funcionam.
Como usar o gerador de clip-path
Escolha um tipo de forma
Selecione uma aba — Polígono, Círculo, Elipse ou Inset — ou abra as Predefinições para partir de uma forma pronta, como estrela, seta ou escudo.
Edite a forma
Arraste os pontos na tela para remodelá-la. Em polígonos, clique em uma aresta para adicionar um ponto e dê duplo clique em um ponto para removê-lo. Para círculo, elipse e inset, arraste os pontos de centro, raio ou borda, ou use os controles deslizantes para valores exatos.
Use os auxiliares da tela
Ative Fora para escurecer a área recortada, ligue a Grade para alinhar, ou mude a cor da tela e envie uma imagem para pré-visualizar a forma sobre um conteúdo real.
Copie o CSS
O valor de clip-path gerado aparece no painel de saída. Clique em Copiar CSS e cole na sua folha de estilos. Já tem um valor? Use Importar para colar um CSS existente e continuar editando visualmente.
Recursos
Editor visual interativo
Arraste os pontos em uma tela 4:3 e o CSS é atualizado na hora, com coordenadas em porcentagem para um posicionamento preciso.
Quatro tipos de forma
Monte clip paths de polygon, circle, ellipse e inset — todas as funções de forma que a propriedade CSS clip-path aceita.
Inset com cantos arredondados
Recorte para dentro a partir de cada borda e adicione um border-radius para arredondar os cantos do retângulo do inset.
28 predefinições prontas
Parta de triângulos, polígonos regulares, estrelas, setas e chevrons, balões de mensagem, escudos e variações de círculo/elipse/inset.
Edição precisa de pontos
Informe valores X/Y exatos para cada ponto do polígono na lista de pontos, com precisão de 0,1% para uma saída limpa e legível.
Gestão inteligente de pontos
Clique em uma aresta para inserir um ponto entre os vértices mais próximos, e dê duplo clique ou delete para remover um — nunca abaixo do mínimo de 3 pontos.
Trava do inset
Ative Travar tudo para alterar os quatro lados do inset de uma vez e recortar de forma uniforme a partir de cada borda.
Histórico de desfazer / refazer
Cada alteração é registrada em uma pilha de histórico de até 50 estados, então você pode avançar e voltar livremente.
Importe CSS existente
Cole um valor de polygon, circle, ellipse ou inset e carregue-o no editor para continuar refinando visualmente.
Fundo personalizado
Mude a cor da tela ou envie uma imagem para pré-visualizar como o seu clip path fica sobre o conteúdo real.
Sobreposições de grade e área externa
Mostre uma grade de porcentagem 10×10 para alinhamento e escureça a área externa para ver exatamente o que é recortado.
Atalhos de teclado
Desfaça e refaça com Ctrl+Z / Ctrl+Y, ajuste um ponto selecionado com as setas (1%, ou 5% com Shift) e remova com Delete.
Perguntas frequentes
O que é clip-path no CSS?
A propriedade CSS clip-path define uma região de recorte para um elemento. Apenas a parte dentro da forma fica visível; tudo fora dela é ocultado. É muito usada em layouts não retangulares, máscaras de imagem e elementos decorativos de interface.
Como funciona o clip-path polygon?
Um valor polygon() é uma lista de pares de coordenadas X/Y conectados por arestas retas, por exemplo polygon(50% 0%, 100% 100%, 0% 100%) para um triângulo. Cada ponto é uma porcentagem da largura e da altura do elemento. Nesta ferramenta você arrasta os pontos em vez de digitar os pares, e o gerador escreve o valor do polygon para você.
Como adicionar ou remover um ponto do polígono?
Clique perto de uma aresta na tela para inserir um novo ponto entre os dois vértices mais próximos. Para remover um, dê duplo clique no ponto, selecione-o e pressione Delete ou Backspace, ou use o botão de remover na lista de pontos. Um polígono sempre mantém ao menos 3 pontos, então os controles de remoção ficam desativados ao atingir o mínimo.
O clip-path pode ter cantos arredondados?
Sim, com a forma inset. A palavra-chave round dentro de inset() adiciona um border-radius ao retângulo recortado — por exemplo, inset(10% round 20%) recorta 10% de cada borda e arredonda os cantos em 20%. Ajuste o controle Raio da borda na aba Inset para defini-lo.
Qual a diferença entre circle e ellipse?
Um circle tem um único raio e é sempre perfeitamente redondo. Uma ellipse tem dois raios independentes — um horizontal (X) e um vertical (Y) — então você pode criar formas ovais mais largas ou mais altas que redondas.
Posso importar meu clip-path CSS já existente?
Sim. Clique em Importar abaixo da saída CSS, cole o seu valor (com ou sem o prefixo clip-path:) e aplique. O analisador lida com os quatro tipos de forma — polygon, circle, ellipse e inset — e carrega a forma no editor para novos ajustes.
O clip-path é compatível com todos os navegadores?
As formas básicas usadas aqui — polygon, circle, ellipse e inset — têm suporte em todas as versões atuais de Chrome, Firefox, Safari e Edge. Para navegadores muito antigos, ofereça um fallback ou um polyfill.
Minhas formas são salvas entre sessões?
Não. As formas não são mantidas entre carregamentos de página, então copie o seu CSS antes de sair. Você pode guardar o valor por conta própria e trazê-lo de volta quando quiser usando o recurso Importar.
Meus dados são enviados a algum servidor?
Não. Toda a edição de formas e a geração de CSS acontecem inteiramente no seu navegador. Nenhum dado é enviado ou transmitido, incluindo qualquer imagem de fundo que você carregar para pré-visualizar uma forma.
Ainda não há comentários. Seja o primeiro a comentar!