UTILS.
100% no navegador

Gerador de clip-path CSS

Recorte um elemento em formas comuns e copie o CSS de clip-path.

Sobre esta ferramenta

Escolha uma forma e recorte instantaneamente uma caixa de visualização com a regra clip-path correspondente, depois copie o CSS pronto para usar. A visualização é atualizada em tempo real, totalmente no seu navegador.

Perguntas frequentes

Como funcionam os clip-paths de polígono?
Cada ponto é um par de porcentagens x y relativo à caixa; o navegador os conecta em ordem e mostra apenas a área dentro do contorno.
Todos os navegadores oferecem suporte a clip-path?
As formas polygon, circle, ellipse e inset têm suporte em todos os navegadores modernos, então o CSS gerado funciona sem prefixos.

Mais ferramentas