Gerador de CSS Clip-path
O gerador de clip-path CSS cria valores clip-path para formas comuns (triângulo, seta, pentágono, hexágono, estrela, chevron, círculo, elipse e inset arredondado) com prévia ao vivo.
Sobre esta ferramenta
O gerador de clip-path CSS cria valores clip-path para formas comuns (triângulo, seta, pentágono, hexágono, estrela, chevron, círculo, elipse e inset arredondado) com prévia ao vivo.
Como usar
- Escolha uma forma na lista.
- Selecione uma cor de preenchimento para a prévia.
- Clique em Copiar CSS e aplique o clip-path a qualquer elemento ou imagem.
Bom saber
- clip-path esconde tudo o que fica fora da forma, então você não precisa de máscara de imagem nem de arquivo SVG.
- polygon() recebe uma lista de pontos x y em porcentagem, que acompanham o tamanho do elemento.
- circle(50% at 50% 50%) recorta um elemento em um círculo centralizado.
- inset() com round adiciona cantos arredondados a um recorte retangular.
- As formas básicas de clip-path são compatíveis com todos os principais navegadores atuais.
Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.
Perguntas frequentes
Como recortar uma imagem em uma forma com CSS?
Aplique um clip-path à imagem, por exemplo clip-path: polygon(50% 0%, 0% 100%, 100% 100%); para um triângulo.
Qual a diferença entre clip-path e mask?
clip-path recorta uma forma vetorial com bordas nítidas. mask usa uma imagem ou um gradiente e pode criar bordas suaves e parcialmente transparentes.
Dá para animar o clip-path?
Sim, se as duas formas usarem a mesma função e o mesmo número de pontos, o navegador consegue fazer a transição entre elas.
O clip-path afeta os cliques?
Sim. As áreas fora da forma recortada não são renderizadas e não recebem eventos de ponteiro.