CSS Clip-Path Generator
Generate CSS clip-path shapes visually.
.element {
clip-path: circle(40% at 50% 50%);
}Sobre esta ferramenta
O Gerador de CSS Clip-Path cria valores clip-path para quatro tipos de formas: circle(), ellipse(), inset() e polygon().
Permite layouts criativos, máscaras de imagem e formas de seção hero sem arquivos SVG. Todos os parâmetros atualizam a prévia em tempo real.
Como usar
- Selecione um tipo de forma: circle, ellipse, inset ou polygon.
- Ajuste os controles deslizantes para configurar os parâmetros.
- Para polígonos, escolha uma forma predefinida da lista.
- A pré-visualização atualiza em tempo real.
- Clique em Copiar para copiar o CSS.
Casos de uso
Seções hero usam clip-path diagonal ou curvo como divisores visuais. Imagens de perfil usam circle(). Efeitos hover usam animações clip-path.
Perguntas frequentes
- O clip-path afeta a área clicável? — Sim. Regiões recortadas não são clicáveis.
- Posso animar clip-path? — Sim. Pode ser transicionado entre dois polígonos com o mesmo número de pontos.
- O clip-path é compatível com todos os navegadores? — Sim, com suporte completo em todos os navegadores modernos.