Gerador clip-path CSS
Recorte uma imagem ou um bloco em polígono, círculo ou retângulo arredondado com clip-path. Arraste os pontos com o mouse e copie o código CSS.
- Grátis
- Sem cadastro
- Nenhum arquivo enviado
- Windows, Mac, Android, iPhone
Carregando a ferramenta…
Sobre esta ferramenta
Desenhe a forma de recorte das suas imagens e blocos: 15 formas prontas (triângulo, hexágono, estrela, seta, balão…), pontos que se arrastam com o mouse ou se movem pelo teclado, além dos modos círculo e retângulo arredondado. Teste a forma na sua foto e copie o código CSS.
Quando usar
Fotos de perfil e miniaturas originais
Hexágonos, losangos ou estrelas dão identidade visual a uma página de equipe ou uma galeria sem editar cada imagem.
Seções inclinadas
Um polígono de quatro pontos inclinado na base de um banner cria uma transição dinâmica entre duas seções.
Selos e etiquetas
Setas, divisas e balões são feitos em CSS puro, sem imagem nem SVG.
Como usar
- Escolha uma forma pronta ou um modo (polígono, círculo, retângulo).
- Arraste os pontos na prévia, adicione ou remova alguns.
- Copie o código clip-path.
Como funciona
Cada ponto é guardado como porcentagem da largura e da altura do elemento, com uma casa decimal. O editor desenha os pontos sobre a prévia; ao movê-los, o valor polygon() é atualizado ao vivo.
Polígonos regulares e estrelas são calculados por trigonometria (pontos distribuídos num círculo). O código gerado inclui a versão -webkit- para navegadores Safari antigos.
Dicas para um melhor resultado
- Mantenha os pontos na ordem do contorno; senão a forma se cruza.
- Para animar entre duas formas, use o mesmo número de pontos nas duas.
- Um box-shadow também é recortado: prefira filter: drop-shadow() num elemento pai.
- Teste a forma na sua foto real: um rosto pode ser cortado por um canto.
Problemas comuns e soluções
A sombra do elemento sumiu
O clip-path também recorta a sombra. Envolva o elemento num pai e aplique filter: drop-shadow() ao pai.
A forma se cruza
Os pontos não estão na ordem do contorno. Remova o ponto errado e adicione de novo no lugar certo.
Os cliques não pegam no elemento
As áreas recortadas não respondem mais a cliques: é proposital, só a parte visível é clicável.
Perguntas frequentes
Para que serve o clip-path?
A propriedade recorta um elemento numa forma: tudo o que fica fora fica invisível. Permite criar imagens hexagonais, banners inclinados ou selos sem editar imagens.
Quais formas são possíveis?
polygon() para qualquer forma de lados retos, circle() e ellipse() para formas redondas, inset() para um retângulo com margens e cantos arredondados.
A forma se adapta ao tamanho do elemento?
Sim: os pontos estão em porcentagem, então a forma acompanha o tamanho da imagem ou do bloco.
Dá para animar um clip-path?
Sim, entre dois polígonos com o mesmo número de pontos: o CSS interpola a posição de cada ponto.
Pesquisas relacionadas
Ainda com problema?
Pergunte no fórum: a categoria, a ferramenta, a ficha do seu dispositivo e o resultado do teste são preenchidos para você.