Propriedade Clip-path
Última atualização: 2026-09-13
clip-path Propriedade Clip-path
A propriedade clip-path recorta um elemento em uma forma geométrica especificada — como um círculo, polígono ou elipse — mostrando apenas a parte dentro da forma e ocultando tudo fora dela. Ao contrário do recorte retangular tradicional de overflow: hidden, o clip-path cria áreas visíveis de qualquer forma, tornando-se uma ferramenta poderosa para layouts criativos e efeitos visuais.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
clip-path: none | <clip-source> | <basic-shape> | <geometry-box>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Sem recorte |
<clip-source> | <basic-shape> | <geometry-box> | Valor | O caminho de recorte |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| clip-path | ✓ v55 | ✓ v79 | ✓ v3.5 | ✓ v9.1 | ✓ v42 |
| Suportado em todos os principais navegadores | |||||
Dica： O polygon() é a função de recorte mais flexível e pode definir qualquer polígono; geradores online como o Clippy produzem as coordenadas rapidamente.
Aviso： O clip-path recorta tanto o conteúdo do elemento quanto sua área interativa; as partes recortadas não conseguem responder a eventos de mouse.
❓ Perguntas Frequentes
QQual é a diferença entre as propriedades clip-path e mask no CSS?
AO clip-path é um recorte rígido: apenas a região dentro do caminho de recorte é mantida, tudo fora fica totalmente invisível e sem resposta a eventos, com uma borda dura. O mask é uma máscara baseada em alfa que suporta gradientes semitransparentes, então você pode obter bordas suaves e esmaecidas. Use clip-path para formas geométricas e mask quando quiser transições suaves usando imagens ou gradientes.
QA propriedade clip-path pode ser animada com transições ou quadros-chave do CSS?
ASim, sob duas condições: as funções dos dois estados são do mesmo tipo e têm o mesmo número de vértices — por exemplo, duas chamadas polygon() com quatro vértices cada, ou um circle() transitando para um círculo maior. Essas dão suporte a transition e animation. Se as quantidades de vértices diferirem (digamos, triângulo para pentágono), a interpolação é impossível; primeiro é preciso igualar ambas à mesma quantidade.
QComo recorto um elemento em um círculo ou polígono e como funcionam as coordenadas?
Acircle(50%) faz um círculo, e você pode adicionar at para definir o centro, como circle(50% at 30% 40%). O polygon() define vértices com coordenadas em porcentagem — polygon(50% 0%, 100% 100%, 0% 100%) é um triângulo — e todas as coordenadas são relativas à própria largura e altura do elemento. Use uma ferramenta visual como o Clippy para arrastar e gerar as coordenadas e depois ajustá-las.
QO clip-path afeta a área de clique e de teste de colisão (hit-test) de um elemento?
ASim. A região recortada não é apenas invisível, mas também não responde a eventos de mouse — a área de hit-test do elemento segue a forma recortada. Você pode usar isso para controlar com precisão a região clicável, mas isso também significa que as partes recortadas não podem hospedar elementos interativos. Se você quiser apenas esconder o visual mantendo a área de clique, use mask ou visibility.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
