Gerador de clip-path Shape

CSS clip-path: recortando elementos HTML com CSS puro

A propriedade clip-path define uma região visível do elemento HTML: tudo que ficar fora dela é ocultado, incluindo bordas, fundos e sombras. Substituiu a antiga propriedade clip (que só aceitava retângulos) e funciona em qualquer elemento — imagens, divs, vídeos, texto, até iframes — sem precisar de máscara SVG nem de biblioteca de gráficos. O suporte de navegador é excelente: Chrome 55+, Firefox 54+, Safari 10+ (com path() a partir do 13.1).

Funções de forma nativas

O CSS já traz quatro funções básicas que cobrem a maioria dos casos:

clip-path: inset(10px 20px 10px 20px round 10px);
clip-path: circle(50% at 50% 50%);
clip-path: ellipse(50% 25% at center);
clip-path: polygon(50% 0, 100% 100%, 0 100%);

polygon() é a mais poderosa: cada vértice é informado como x y em porcentagens ou pixels e os pontos são ligados na ordem. Três pontos formam um triângulo; com quatro você monta paralelogramos e chevrons; seis dão um hexágono; dez raios alternando interno e externo desenham uma estrela.

Avançado: path(), shape() e referência a SVG

Quando polígonos não bastam, clip-path: path("M0 0 L100 100 ...") aceita a sintaxe completa de SVG path, incluindo curvas de Bézier, arcos e sub-paths. A função shape() (rascunho CSS Shapes 2) traz uma sintaxe mais amigável e mistura unidades. Você também pode referenciar um <clipPath> SVG inline: clip-path: url(#mascara) — ótimo para reaproveitar formas complexas em vários elementos.

Animações e transições

clip-path é animável quando os dois keyframes usam a mesma função e o mesmo número de vértices. Um reveal de hover vira transition: clip-path 0.3s ease; com dois estados de polygon. Os engines compõem o clip na GPU para transforms, então as animações ficam suaves até em mobile mediano. Se o número de vértices diferir, a propriedade troca abruptamente em vez de interpolar — duplique pontos no polígono menor para casar a contagem.

Casos de uso e ferramentas

• Avatares com formas irregulares (hexágonos, blobs, círculos serrilhados).
• Reveals de imagem no hover — animar um círculo crescendo a partir do cursor.
• Divisores diagonais entre seções, muito usados em landing pages SaaS.
• Heros inclinados sem wrappers SVG nem nós extras no DOM.

O editor visual clássico é o Clippy (bennettfeely.com/clippy) — arraste os vértices e copie o CSS. As adições CSS 4 rect() e xywh() são úteis para recortes alinhados aos eixos.

Perguntas frequentes

Qual a diferença entre clip-path e mask-image? clip-path é binário — um pixel fica 100% visível ou 100% removido. mask-image suporta canal alpha e gradientes, permitindo desvanecer a borda em vez de cortá-la a seco.

Posso animar entre dois polígonos diferentes? Sim, desde que as duas listas tenham o mesmo número de vértices. O navegador interpola cada ponto linearmente. Para morphing entre formas totalmente diferentes, use path() com a mesma quantidade de comandos.

clip-path aceita SVG path? Sim, de duas formas: inline com path("...") ou referenciando um SVG inline com url(#id). A segunda forma permite reusar a mesma forma em vários elementos.

Tem custo de performance? Mínimo. Elementos clipados ganham uma camada composta própria, então o custo de paint é baixo; o que evitar é animar clip-path em centenas de elementos ao mesmo tempo em dispositivos mais fracos.