Design · utilitário Local
CSS Clip Path Generator
Edite vértices arrastando, pelo teclado ou por coordenadas. Quatro formas iniciais e cópia local da declaração clip-path ou do CSS completo.
Caminho da tarefa / da entrada ao resultado
Escolha uma forma inicial
Roda localmente · Nada é enviado
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;
}Estão disponíveis quatro modelos e dois controles deslizantes. Edição livre de vértices, importação de caminhos SVG e curvas não são suportadas. Para copiar ou baixar uma regra personalizada, use Copiar CSS ou Baixar .css no espaço de trabalho.
Caminho da tarefa / da entrada ao resultado
Escolha hexágono, losango, paralelogramo ou chevron. Dois controles deslizantes ajustam a forma; editar um vértice ativa o polígono personalizado.
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.
Confira as bordas antes de exportar. Os controles numerados servem apenas para edição e não fazem parte do CSS.
Saída CSS: Somente declaração clip-path / Exemplo CSS completo. O exemplo completo contém a cor escolhida, largura de 240px e proporção 4:3. 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.
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.
Comece com quatro formas predefinidas e adicione, exclua ou mova vértices. Exporte uma declaração clip-path ou um exemplo CSS completo. As coordenadas percentuais acompanham o elemento. Cole a declaração em uma regra existente ou use .clipped-shape. Confira no desktop e no celular.
Perguntas frequentes