O que é o Criador de CSS Clip Path?

O Criador de CSS Clip Path é um editor visual para criar formas CSS clip-path. Em vez de escrever valores de clip-path manualmente, você pode arrastar alças em uma tela interativa para projetar sua forma e copiar o código CSS gerado.

Processamento no cliente: Toda a edição acontece no seu navegador — sem uploads, sem rastreamento, privacidade total.

Por que usar um Editor Visual de Clip-Path?

A propriedade CSS clip-path é poderosa, mas desafiadora de escrever manualmente. Formas polygon exigem pares de coordenadas precisos, e até pequenas mudanças precisam recalcular múltiplos valores. Um editor visual resolve isso permitindo que você:

Feedback Visual Instantâneo

Arraste as alças e veja a forma atualizar em tempo real na tela.

Controle de Precisão

Use sobreposição de grade e entradas numéricas para posicionamento exato com precisão de 0,1%.

28 Predefinições Prontas

Escolha entre estrelas, setas, escudos e muito mais — depois personalize conforme necessário.

Importar Código Existente

Cole seu CSS clip-path atual para editá-lo visualmente e refinar ainda mais.

Tipos de Formas Suportadas

Polygon

Crie qualquer forma com múltiplos pontos conectados por arestas retas.

Circle

Defina uma área de recorte circular com raio e centro ajustáveis.

Ellipse

Crie uma forma oval com raios horizontais e verticais independentes.

Inset

Recorte a partir das arestas para dentro com border-radius opcional para retângulos arredondados.

Para Quem É Isso?

Desenvolvedores frontend construindo componentes de UI personalizados com formas não retangulares
Designers web criando seções hero, máscaras de imagem e elementos decorativos
Aprendizes de CSS explorando como os valores de clip-path funcionam através de feedback visual

Table of Contents

1. O que é o Criador de CSS Clip Path?
2. Como Usar o Criador de CSS Clip Path
3. Recursos
4. Perguntas Frequentes

Como Usar o Criador de CSS Clip Path

Criar uma forma clip-path leva apenas alguns passos. Siga este guia para dominar o editor visual:

Escolha um Tipo de Forma

Clique em uma das quatro abas de forma no topo do editor:

Polygon - Para formas personalizadas com múltiplos pontos (padrão)
Circle - Para recorte circular
Ellipse - Para formas ovais
Inset - Para recorte retangular a partir das arestas

Ou navegue pela seção Predefinições para começar com uma forma pronta, como estrelas, setas ou escudos.

Edite a Forma

Cada tipo de forma tem seus próprios controles de edição:

Edição de Polygon

Arraste as alças na tela para mover pontos
Clique em uma aresta para adicionar um novo ponto entre os existentes
Clique duas vezes em uma alça para remover um ponto (mínimo de 3 pontos necessários)
Use a lista de pontos à esquerda para inserir valores exatos de X/Y

Edição de Circle & Ellipse

Arraste a alça do centro para reposicionar a forma
Arraste as alças de raio para redimensionar
Use controles deslizantes para controle preciso sobre raio e posição do centro

Edição de Inset

Arraste as alças de aresta para ajustar quanto é recortado de cada lado
Ative Bloquear Tudo para alterar todos os quatro lados simultaneamente
Ajuste o Border Radius para arredondar os cantos do retângulo inset

Use as Opções da Tela

Exterior - Alterne a visibilidade da área fora do clip-path (mostrada como uma sobreposição atenuada)
Grade - Mostre uma sobreposição de grade 10×10 para alinhamento
Fundo - Altere a cor da tela ou carregue uma imagem para visualizar seu clip-path em conteúdo real

Copie o CSS

O código CSS gerado aparece no painel de saída à direita. Clique em Copiar CSS para copiá-lo para sua área de transferência, depois cole-o em sua folha de estilos.

Atalhos de Teclado

Atalho	Ação
`Ctrl` + `Z` / `Cmd` + `Z`	Desfazer última alteração
`Ctrl` + `Y` / `Cmd` + `Shift` + `Z`	Refazer última alteração desfeita
Setas do teclado	Ajuste o ponto do polígono selecionado em 1%
`Shift` + Setas do teclado	Ajuste o ponto do polígono selecionado em 5%
`Delete` / `Backspace`	Remova o ponto do polígono selecionado

Recursos

Editor Visual Interativo

A tela exibe sua forma clip-path em tempo real. Arraste as alças para modificar a forma e veja o código CSS atualizar instantaneamente. A tela usa uma proporção de aspecto de 4:3 com coordenadas baseadas em percentual para posicionamento preciso.

Visualização em tempo real: Cada alteração que você faz é imediatamente refletida tanto na tela visual quanto na saída CSS gerada.

Suporte Abrangente de Formas

Todas as quatro funções de forma CSS clip-path são totalmente suportadas com interfaces de edição dedicadas:

Polygon

Defina qualquer forma com um número ilimitado de pontos conectados por linhas retas. Perfeito para designs geométricos personalizados.

Circle

Um círculo perfeito com raio e posição do centro ajustáveis. Ideal para máscaras de imagem circular e avatares.

Ellipse

Um oval com raios horizontais (X) e verticais (Y) independentes. Ótimo para efeitos circulares esticados.

Inset

Recorte a partir das arestas para dentro com cantos arredondados opcionais via border-radius. Perfeito para áreas de conteúdo emolduradas.

28 Predefinições Integradas

Comece com qualquer uma das 28 formas predefinidas organizadas em 6 categorias para acelerar seu fluxo de trabalho:

Formas Básicas

Triângulo, trapézio, losango e outras formas geométricas fundamentais.

Polígonos Regulares

Pentágono, hexágono, heptágono e octógono com lados perfeitamente simétricos.

Estrelas

Estrelas de 4 pontas, 5 pontas, 6 pontas, além de formas de cruz e X para elementos decorativos.

Setas

Setas direcionais em 4 direções (cima, baixo, esquerda, direita) além de variações de chevron.

Formas Complexas

Bolha de mensagem, bisel, rabete, escudo e outros designs geométricos avançados.

Variações de Circle/Ellipse/Inset

Formas circulares, ovais e inset pré-configuradas com configurações comuns.

Edição Precisa de Pontos

Para formas polygon, cada ponto pode ser editado numericamente através do painel de lista de pontos. Cada ponto mostra suas coordenadas X e Y com precisão de 0,1%. Selecione um ponto clicando em sua linha, depois ajuste com os campos de entrada ou setas do teclado.

Dica profissional: Use as setas do teclado para ajustes rápidos — mantenha Shift pressionado para incrementos de 5% em vez de 1%.

Gerenciamento Inteligente de Pontos

Adicionando Pontos

Clique nas Arestas

Clique em qualquer lugar perto de uma aresta do polígono
Novo ponto inserido entre os vértices mais próximos
Deve estar dentro de ~5% da aresta para registrar

Removendo Pontos

Múltiplos Métodos

Clique duas vezes na alça na tela
Selecione o ponto e pressione Delete/Backspace
Clique no botão remover (×) na lista de pontos
Mínimo de 3 pontos obrigatório

Recurso de Bloqueio de Inset

Ao trabalhar com a forma inset, ative "Bloquear Tudo" para alterar todos os quatro lados simultaneamente. Isso é útil quando você deseja recorte uniforme de todas as arestas. O controle deslizante de border-radius adiciona cantos arredondados ao retângulo inset.

Exemplo: Inset com cantos arredondados

/* Uniform 10% inset with 20% corner radius */
clip-path: inset(10% round 20%);

Histórico de Desfazer/Refazer

Cada alteração de forma é registrada em uma pilha de histórico (até 50 estados). Use os botões desfazer/refazer ou atalhos de teclado para percorrer seu histórico de edição sem perder seu trabalho.

Capacidade de Histórico 50 estados

Importação de CSS

Já tem um valor de clip-path? Clique em "Importar" e cole seu código CSS. A ferramenta analisa valores polygon, circle, ellipse e inset e os carrega no editor visual para edição adicional.

Importação flexível: Funciona com ou sem o prefixo clip-path: — apenas cole o valor e clique em Aplicar.

Auxiliares de Tela

Duas opções de sobreposição ajudam você a trabalhar com mais eficácia:

Sobreposição de Área Exterior

Uma sobreposição atenuada mostrando a região fora de seu clip-path, deixando claro o que será visível e o que será recortado.

Grade 10×10

Uma grade baseada em percentual para alinhamento preciso e simetria ao posicionar pontos.

Fundos Personalizados

Visualize seu clip-path em diferentes fundos alterando a cor da tela ou carregando uma imagem. Isso ajuda a visualizar como a forma ficará em seu conteúdo real antes de implementá-la em seu design.

Seletor de cor sólida para fundos simples
Carregamento de imagem para visualização realista de conteúdo
Alternância instantânea de fundo sem perder sua forma

Perguntas Frequentes

O que é CSS clip-path?

A propriedade CSS clip-path define uma região de recorte para um elemento. Apenas a porção dentro da forma de recorte é visível; tudo fora é ocultado. É comumente usado para criar layouts não retangulares, máscaras de imagem e elementos decorativos de UI.

Quais navegadores suportam clip-path?

A propriedade clip-path com formas básicas (polygon, circle, ellipse, inset) é suportada em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. Para navegadores mais antigos, considere fornecer um fallback ou usar um polyfill.

Suporte excelente: Mais de 97% dos navegadores globais suportam clip-path com formas básicas.

Como adiciono um ponto a um polígono?

Clique em qualquer lugar perto de uma aresta do polígono na tela. Um novo ponto será inserido entre os dois pontos existentes mais próximos. O clique deve estar dentro de aproximadamente 5% de uma aresta para registrar.

Como removo um ponto do polígono?

Você tem três opções:

Clique duas vezes na alça na tela
Selecione o ponto e pressione Delete ou Backspace
Clique no botão remover (×) na lista de pontos

Requisito mínimo: Um polígono deve sempre ter pelo menos 3 pontos para permanecer válido.

Posso importar meu CSS clip-path existente?

Sim. Clique no botão "Importar" abaixo da saída CSS, cole seu valor de clip-path (com ou sem o prefixo clip-path:), e clique em "Aplicar". A ferramenta suporta todos os quatro tipos de forma: polygon, circle, ellipse e inset.

Qual é a diferença entre circle e ellipse?

Circle

Raio Único

Um valor de raio
Sempre perfeitamente redondo
Largura e altura iguais

Ellipse

Dois Raios Independentes

Raios X e Y separados
Cria formas ovais
Pode ser mais largo ou mais alto

O que o valor "round" em inset faz?

O parâmetro "round" em inset() adiciona border-radius ao retângulo recortado. Por exemplo:

Inset com cantos arredondados

/* 10% inset from all edges with 20% corner radius */
clip-path: inset(10% round 20%);

Por que não consigo deletar um ponto do polígono?

Um polígono requer pelo menos 3 pontos para ser uma forma válida. Se você tiver apenas 3 pontos restantes, os controles de exclusão serão desativados para evitar criar um polígono inválido.

Qual é a precisão das coordenadas?

Todas as coordenadas usam valores de percentual com precisão de 0,1% (uma casa decimal). Isso fornece precisão suficiente para a maioria dos casos de uso, mantendo a saída CSS limpa e legível.

Posso usar uma imagem de fundo para visualizar?

Sim. Clique no botão de carregamento ao lado do seletor de cor na área de configurações da tela. Selecione um arquivo de imagem e ele será exibido como fundo da tela, permitindo que você visualize como sua forma de clip-path ficará em conteúdo real.

Minhas formas são salvas entre sessões?

Não, as formas não são persistidas entre carregamentos de página. Certifique-se de copiar seu código CSS antes de sair da página. Você também pode salvar seus valores de clip-path externamente e importá-los depois usando o recurso Importar.

Lembre-se de salvar: Sempre copie sua saída CSS antes de fechar a página para evitar perder seu trabalho.

Meus dados são enviados para algum servidor?

Não. Toda a edição de forma e geração de CSS acontece inteiramente no seu navegador. Nenhum dado é carregado ou transmitido para qualquer servidor, incluindo qualquer imagem de fundo que você carregue.

100% no cliente: Sua privacidade é garantida — todo o processamento acontece localmente no seu dispositivo.