Gerador de CSS Clip-Path com Preview
A propriedade CSS clip-path permite recortar elementos em qualquer forma — triângulos, hexágonos, formas orgânicas — sem precisar de imagens. O Gerador de CSS Clip-Path oferece um editor visual onde você arrasta os pontos e obtém o código instantaneamente.
Formas básicas disponíveis
- polygon(): Qualquer forma com múltiplos pontos
- circle(): Recorte circular com tamanho e posição personalizáveis
- ellipse(): Recorte elíptico
- inset(): Retângulo com bordas arredondadas opcionais
- path(): Formas SVG complexas (somente Chrome/Edge)
Casos de uso criativos
Seções hero com ângulo diagonal, avatares em hexágono, imagens com formas orgânicas, máscaras de vídeo — clip-path é versátil e performático pois usa a GPU. Também funciona com animações CSS para transições de forma fluidas.
Compatibilidade com browsers
As formas básicas (polygon, circle, ellipse, inset) têm excelente suporte em todos os browsers modernos. path() tem suporte mais limitado — verifique a compatibilidade antes de usar em produção.
Acesse: Gerador de CSS Clip-Path
Perguntas Frequentes
clip-path afeta eventos de mouse (hover, click)?
Sim. A área clipada fora da forma não recebe eventos de mouse. Isso é importante ao usar em elementos interativos.
Como animar uma mudança de forma com clip-path?
Use transition: clip-path para transições suaves. Os polígonos precisam ter o mesmo número de pontos para a animação funcionar corretamente.
Posso usar clip-path em texto?
Sim, clip-path funciona em qualquer elemento HTML, incluindo texto e elementos de formulário.