Gerador de Clip-path

Recorte elementos com polígonos e formas personalizadas usando clip-path.

Efeitos & Visual

 estilo.css

clip-path

Recorta o elemento em uma forma definida por funções como circle(), ellipse() ou polygon(), escondendo tudo que fica fora do caminho.

polygon()

Recebe uma lista de pontos (x y) que formam os vértices da forma, permitindo qualquer polígono personalizado.

Perguntas frequentes

Clip-path funciona em imagens?

Sim, e é uma das formas mais usadas — recortar fotos em formas não retangulares sem editar o arquivo original.

Dá para animar o clip-path?

Sim, desde que os dois valores (inicial e final) tenham o mesmo número de pontos na mesma função.

Existe suporte em todos os navegadores?

O suporte é amplo nos navegadores modernos; para formas críticas, sempre teste com um fallback visual simples.

Formas prontas — triângulos, hexágonos, estrelas — geradas com clip-path.

Use mask-image com gradientes para criar transições de opacidade e recortes suaves.

Combine translate, rotate, scale e skew num único transform.