Gerador de CSS Clip Path

Gere formas CSS clip-path interativamente: polígono, círculo e elipse. Arraste vértices, escolha presets como seta ou estrela e copie o valor CSS clip-path.

Presets

Preview (drag points)

BG:

Vertices (3)

CSS Output

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

Como Usar Gerador de CSS Clip Path

1Escolha um tipo de clip-path: polígono, círculo ou elipse.
2Selecione uma forma predefinida ou arraste os pontos de controle para criar uma forma personalizada.
3Copie o valor CSS clip-path para usar em sua folha de estilos.

ZenovayAnalytics

Saiba o que seus visitantes realmente fazem.

Acompanhamento de visitantes em tempo real
Privacidade em primeiro lugar, sem banner de cookies
Configurado em dois minutos

Conheça o Zenovay

Ferramentas Relacionadas

Gerador de Gradientes CSS

Crie belos gradientes CSS com um editor visual. Gradientes lineares, radiais e cônicos.

Gerador de CSS Box Shadow

Projete sombras CSS box-shadow com controles visuais. Ajuste o deslocamento, desfoque, espalhamento e cor.

Gerador de CSS Border Radius

Crie valores personalizados de border radius com controles visuais. Vincule ou desvinque os cantos para ajuste rápido.

Área de Testes CSS Flexbox

Aprenda e gere layouts CSS Flexbox visualmente. Ajuste direção, alinhamento, quebra de linha e espaçamento em tempo real.

Perguntas Frequentes

O que é clip-path no CSS?▾

clip-path recorta um elemento em uma forma específica. Tudo fora da forma fica oculto. Valores suportados: polygon(x1 y1, x2 y2, ...): polígono personalizado com vértices em porcentagens. circle(radius at cx cy): círculo. ellipse(rx ry at cx cy): elipse. inset(top right bottom left round radius): retângulo inserido. path("SVG path"): caminho SVG. Exemplo: clip-path: polygon(50% 0%, 0% 100%, 100% 100%) cria um triângulo. O clip-path CSS substituiu o clipPath SVG obsoleto para a maioria dos casos. Suporte de navegadores: todos os modernos. Use o prefixo de fornecedor -webkit-clip-path para Safari < 14.

Quais são os padrões comuns de formas com clip-path?▾

Triângulo para cima: polygon(50% 0%, 0% 100%, 100% 100%). Triângulo para baixo: polygon(0% 0%, 100% 0%, 50% 100%). Hexágono: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). Seta para a direita: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%). Estrela: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%). Pentágono: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%). Chevron: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%).

Como o clip-path interage com border-radius?▾

clip-path sobrescreve visualmente o border-radius — o border-radius ainda existe no box model, mas o clip-path oculta os cantos, tornando-o invisível. Para formas arredondadas, use: inset(0 round 10px) para um retângulo arredondado. circle() e ellipse() são inerentemente suaves. Para polígonos arredondados, use o polygon() CSS com a próxima propriedade corner-shape (ainda experimental). Uma alternativa: aplique border-radius em um elemento filho dentro do contêiner recortado. Tanto clip-path quanto border-radius afetam as áreas de clique/hover.

Posso animar o clip-path no CSS?▾

Sim! clip-path suporta CSS transitions e animations entre formas com o mesmo número de pontos. Exemplo: element { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition: clip-path 0.5s ease; } element:hover { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } Ambas as formas precisam ter o mesmo número de vértices de polígono para interpolação suave. Para formas com contagens de vértices diferentes, elas saltam sem interpolação. Dica: adicione vértices de ponto médio extras a ambas as formas para habilitar a interpolação entre polígonos de formas diferentes.

Qual é a diferença entre clip-path e mask?▾

clip-path: usa uma forma geométrica (polígono, círculo, caminho SVG). A área recortada fica completamente oculta. Bordas nítidas. Alto desempenho (acelerado por GPU). mask: usa uma imagem ou gradiente. Branco = visível, preto = oculto, cinza = semitransparente. Permite bordas suaves, gradientes e masks complexas. mask-image: linear-gradient(to right, transparent, black) cria um efeito de desvanecimento. Use clip-path para formas geométricas duras (seções diagonais, triângulos, hexágonos). Use mask para efeitos suaves, desvanecimentos e masks baseadas em imagem. Ambas aceitam a mesma sintaxe de caminho SVG.