Como usar: Gerador de Clip-path CSS
- Escolha uma forma inicial — polígonos, círculo, elipse ou um retângulo arredondado.
- Arraste os pontos sobre a imagem. Selecione um ponto e use + Add point para inserir outro logo depois dele, ou Remove point para apagar. Comece com Rectangle para desenhar a sua própria forma.
- Para círculos, elipses e insets, use os controles deslizantes do painel.
- Copie o CSS e aplique em qualquer imagem, vídeo ou elemento. Use Use my image para visualizar com a sua própria foto.
clip-path em resumo
clip-path oculta tudo que fica fora de uma forma. O elemento mantém o tamanho e o layout; só a área visível muda — o que o torna perfeito para imagens de destaque, avatares, formas de seção e efeitos de hover (valores de clip-path com o mesmo número de pontos podem ser animados com transition).
| Função | Exemplo |
|---|---|
polygon() | polygon(50% 0%, 100% 100%, 0% 100%) — um triângulo; qualquer número de pontos |
circle() | circle(40% at 50% 50%) |
ellipse() | ellipse(45% 35% at 50% 50%) |
inset() | inset(10% 5% round 24px) — um retângulo arredondado recortado a partir das bordas |
As porcentagens são relativas à caixa do elemento, então a forma escala junto com ele. Todos os navegadores modernos suportam formas de clip-path; a linha -webkit- cobre versões mais antigas do Safari. Para suavizar as bordas em vez de recortá-las, use o Gerador de Máscara CSS; para formas orgânicas, o Gerador de Blob SVG.
Também pesquisado como: gerador clip path css, clip-path polygon, formas css, gerador de polígono css, clip-path círculo, forma de imagem css, alternativa ao clippy.
Ferramentas que combinam com: Gerador de Clip-path CSS
- Gerador de Border Radius — Arredonde os cantos de qualquer caixa: arraste um controle deslizante para todos os cantos ou defina cada canto separadamente, mude para cantos elípticos para criar formas de blob e folha e copie o CSS border-radius válido mais curto.
- Gerador de Triângulo CSS — Crie um triângulo só com CSS para a seta de um tooltip, o caret de um dropdown ou um balão de fala: escolha uma das 8 direções, a largura, a altura e a cor, e copie o truque do border clássico ou a versão mais simples com clip-path.
- Gerador de Filtro CSS — Ajuste blur, brilho, contraste, saturação, matiz, escala de cinza, sépia, inversão e sombra projetada em uma imagem de exemplo ou na sua e copie o CSS do filter.
- Gerador de Ondas SVG — Crie divisores ondulados de seção para landing pages: adicione ou remova ondas (até 6, cada uma com cor, opacidade e formato próprios), defina o número de cristas, a altura e a suavidade, escolha as cores e se a onda fica no topo ou na base.
Perguntas frequentes
Como faço uma forma de polígono em CSS?
Escolha uma forma inicial aqui, arraste os pontos para onde quiser e copie a linha clip-path: polygon(…). Cada ponto é um par x% y% relativo ao elemento.
Como adiciono mais pontos a um polígono de clip-path?
Selecione um ponto e clique em + Add point: um novo ponto aparece no meio do caminho até o próximo, pronto para ser arrastado. Dar duplo clique na imagem adiciona um ponto na borda mais próxima; Remove point apaga o ponto selecionado.
Posso animar o clip-path?
Sim — use transition ou animate entre dois valores de clip-path do mesmo tipo e com o mesmo número de pontos, por exemplo, dois shapes polygon() com 6 pontos cada.
O clip-path funciona em todos os navegadores?
As formas básicas (polygon, circle, ellipse, inset) funcionam em todos os navegadores modernos. Adicione a linha -webkit-clip-path que a ferramenta inclui para versões mais antigas do Safari.
Por que minha sombra some com o clip-path?
O clip-path também recorta o box-shadow. Envolva o elemento em um pai e use filter: drop-shadow() no pai.
Posso instalar o Gerador de Clip-path CSS como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Clip-path CSS é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.