Gerador de clip-path CSS

CSS Clip-Path Generator é uma ferramenta visual para criar e testar propriedades CSS clip-path. Clip-path permite que você recorte elementos para formas básicas (círculo, elipse, polígono) ou um caminho SVG. Esta ferramenta fornece visualização em tempo real e geração de código para ajudá-lo a criar formas personalizadas para seus projetos web.

Clique em qualquer botão de forma predefinida no painel Predefinições para aplicá-la instantaneamente. A ferramenta inclui 12 formas integradas: Triângulo, Trapézio, Paralelogramo, Pentágono, Hexágono, Heptágono, Octógono, Estrela, Círculo, Elipse, Moldura Interna e Arredondado Interno. A visualização é atualizada imediatamente para mostrar como a forma recorta o elemento.

Insira qualquer valor clip-path válido no campo de entrada Caminho Personalizado. Suporta todas as funções clip-path: polygon(), circle(), ellipse(), inset() e path(). A ferramenta exibe o código CSS gerado com prefixo padrão e -webkit- para máxima compatibilidade com navegadores. Clique no botão Copiar para copiar o código para sua área de transferência.

O Construtor de Polígonos fornece uma interface visual para criar formas de polígono personalizadas. Cada ponto é definido por coordenadas X e Y (0-100%). Adicione mais pontos (mínimo 3) para criar polígonos complexos ou remova pontos para simplificar. O construtor gera automaticamente a sintaxe CSS polygon() válida conforme você ajusta as coordenadas.

Personalize a visualização ajustando o controle deslizante Tamanho (100-400px) e usando o seletor de cores para alterar a cor de fundo do elemento. Esses ajustes ajudam você a visualizar como o clip-path aparecerá com diferentes tamanhos e cores de elementos em seu design.

CSS clip-path é suportado em todos os navegadores modernos. A ferramenta inclui automaticamente -webkit-clip-path para compatibilidade com Safari. Observe que clip-path com a função path() tem suporte limitado em navegadores mais antigos. Sempre teste seus navegadores alvo antes de implantar em produção.