CSS Clip Path Generator
24 formas de recorte, parâmetros e pontos de polígono editáveis; exporte CSS ou uma declaração.
Processamento local
Compare quatro polígonos e depois reproduza as configurações no espaço de trabalho. Cada prévia usa o mesmo polígono do seu CSS; a caixa inicial exportada é 240 × 180 px.
Ajustar estas configurações no espaço de trabalhoUse um hexágono para um avatar de equipe ou um selo repetido.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}Experimente um losango inclinado em uma imagem pequena ou um detalhe decorativo.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
}Use uma forma inclinada de quatro pontas como detalhe de um cartão.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
}Aponte a borda de um banner para a próxima seção.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
}Comece com o CSS de qualquer forma acima e adicione estas regras em seguida. Substitua o caminho da imagem e o texto alternativo pelos seus. A caixa mantém a proporção 4:3; object-fit: cover corta a imagem para preenchê-la sem esticar. As coordenadas percentuais acompanham a caixa quando ela muda de tamanho.
<img class="clipped-shape"
src="/your-image.jpg"
alt="Descreva sua imagem"
width="240" height="180">.clipped-shape {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}Esta galeria mostra 4 exemplos básicos de polígono. O espaço de trabalho oferece 24 formas; os polígonos permitem adicionar, excluir e mover vértices, enquanto círculos, elipses e formas inset usam parâmetros. Não inclui importação de caminhos SVG nem edição de curvas personalizadas. Use Copiar CSS ou Baixar .css no espaço de trabalho para salvar a regra. As prévias de imagens locais PNG/JPEG/WebP ficam nesta aba, sem envio nem armazenamento. A proporção só altera o recorte da prévia; a imagem e essa proporção não entram nas exportações CSS/HTML.
Caminho da tarefa / da entrada ao resultado
Escolha entre 24 formas. Os polígonos permitem adicionar, excluir e mover vértices; círculos, elipses e formas inset usam parâmetros. Exporte uma declaração clip-path ou um exemplo CSS completo.
Arraste um vértice numerado ou insira coordenadas. As setas movem o vértice em foco em 1%; Shift + seta, em 10%. Adicionar insere um ponto médio após o vértice selecionado.
O exemplo completo contém a cor escolhida, largura de 240px e proporção 4:3. O editor se adapta à tela.
Escolha uma imagem local PNG, JPEG ou WebP de até 8 MiB, 16 megapixels e 8192 pixels por lado. É possível visualizar as 24 formas. A imagem preenche o quadro com recorte cover; 4:3, 1:1, 16:9 e 3:4 alteram apenas esta prévia. A imagem não é enviada nem salva e não faz parte das exportações CSS/HTML. O exemplo CSS completo mantém 4:3. Copie ou baixe o CSS antes de sair.
Saída CSS: Somente declaração clip-path / Exemplo CSS completo. O editor se adapta à tela.
As coordenadas percentuais acompanham o elemento. Cole a declaração em uma regra existente ou use .clipped-shape. Confira no desktop e no celular. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.
Gerador de clip-path CSS usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.
Roda dentro da aba atual do navegador.
Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.
Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.
Limpe a aba e os dados de trabalho ativos desaparecem.
No teste local de 2026-09-24, comece com o Hexágono padrão (horizontal 24%, vertical 50%). Selecione o ponto 1, mude X de 24% para 30% e defina a cor #ff6600. A prévia mostra um polígono laranja de seis pontos com clip-path polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); os outros cinco mantêm a ordem.
O CSS completo usa .clipped-shape com largura 240px, proporção 4 / 3, fundo #ff6600, -webkit-clip-path e clip-path. O CSS copiado foi igual ao arquivo baixado toolars-clip-path.css (240 bytes). No modo apenas declaração, a cópia foi exatamente clip-path: polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); (73 bytes UTF-8). Confira o recorte no seu layout.
Defina X do ponto 1 como 101%. Em 2026-09-24, a área informou que coordenadas devem ser finitas e ficar entre 0 e 100%; prévia e CSS sumiram, cópia e download foram desativados. X = 30% restaura polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%). Arestas cruzadas não são corrigidas automaticamente.
Escolha entre 24 formas.
Perguntas frequentes