# Gerador de Caminho de Recorte CSS

Gera propriedades de caminho de recorte CSS para formas personalizadas

> Página canônica: https://elysiatools.com/pt/tools/clip-path-generator

- **Categoria:** Design

- **Palavras-chave:** css, clip-path, forma, polígono, círculo, gerador

## Visão geral

O Gerador de Caminho de Recorte CSS permite criar formas geométricas complexas e personalizadas para seus elementos web, gerando automaticamente o código CSS necessário para a propriedade clip-path.

## Entradas

- **Forma** (select)
- **Raio/Escala** (range)
- **Número de Lados (para polígono/estrela)** (range)
- **Tamanho (%)** (range)

## Quando usar

- Ao criar layouts modernos com imagens recortadas em formatos não retangulares.
- Para aplicar efeitos visuais dinâmicos em botões, cards ou elementos de interface.
- Quando precisar de formas geométricas precisas como estrelas, hexágonos ou polígonos sem usar imagens externas.

## Como funciona

- Selecione o tipo de forma desejada no menu de opções, como círculo, polígono ou estrela.
- Ajuste os controles deslizantes para definir o tamanho, o número de lados ou o raio da forma.
- Visualize o resultado e copie o código CSS gerado automaticamente para aplicar ao seu projeto.

## Casos de uso

- Criação de avatares de usuário com recortes circulares ou hexagonais.
- Desenvolvimento de banners promocionais com recortes diagonais ou poligonais.
- Estilização de botões de chamada para ação (CTA) com formas geométricas únicas.

## Perguntas frequentes

### O que é a propriedade clip-path no CSS?

É uma propriedade que permite recortar um elemento em uma forma específica, exibindo apenas a parte interna do caminho definido.

### Posso usar formas personalizadas além das básicas?

Sim, ao selecionar a opção 'polígono', você pode definir vértices específicos para criar qualquer formato geométrico desejado.

### O código gerado funciona em todos os navegadores?

A maioria dos navegadores modernos suporta a propriedade clip-path, mas é recomendável verificar a compatibilidade para versões muito antigas.

### Como ajusto o tamanho da forma?

Utilize o controle deslizante 'Tamanho (%)' para definir a escala da forma em relação ao elemento original.

### Preciso de conhecimentos avançados de CSS?

Não, a ferramenta gera o código pronto para copiar e colar, facilitando o uso mesmo para iniciantes.

## Ferramentas relacionadas

- [Gerador de Animação CSS](https://elysiatools.com/pt/tools/animation-generator): Gera quadros-chave e propriedades de animação CSS
- [Gerador de Filtro de Fundo CSS](https://elysiatools.com/pt/tools/backdrop-filter-generator): Gera propriedades de filtro de fundo CSS para efeitos de vidro fosco
- [Gerador de Raio de Borda CSS](https://elysiatools.com/pt/tools/border-radius-generator): Gera propriedades de raio de borda CSS
- [Gerador de Sombra de Caixa CSS](https://elysiatools.com/pt/tools/box-shadow-generator): Gera propriedades de sombra de caixa CSS
- [Gerador de Filtros CSS](https://elysiatools.com/pt/tools/css-filter-generator): Gera propriedades de filtro CSS
- [Gerador de Transformação CSS](https://elysiatools.com/pt/tools/transform-generator): Gera propriedades de transformação CSS
- [Gerador de Gradiente de Cores](https://elysiatools.com/pt/tools/color-gradient-generator): Gera gradientes de cores suaves entre múltiplas cores com passos e formatos personalizáveis
- [Gerador de Esquemas de Cores](https://elysiatools.com/pt/tools/color-scheme-generator): Gera esquemas de cores e paletas profissionais para projetos de design

## Exemplos

- [Amostras de Analizador de Caminho](https://elysiatools.com/pt/samples/path-analyzer): Coleção abrangente de caminhos do sistema de arquivos do Windows, Linux e macOS para análise e testes de caminhos
- [Exemplos do Framework CSS Bulma](https://elysiatools.com/pt/samples/bulma): Exemplos do framework CSS Bulma incluindo colunas, componentes, controles de formulário, sistema de layout e padrões de design modernos baseados em CSS
- [Exemplos de Seletores CSS](https://elysiatools.com/pt/samples/css-selectors): Coleção de exemplos de seletores CSS para testes de extração e análise
- [Amostras CSS](https://elysiatools.com/pt/samples/css-viewer-samples): Arquivos de amostra para o visualizador CSS no navegador

## Conteúdo relacionado

- [Fluxo de sistema de cores e efeitos CSS](https://elysiatools.com/pt/hubs/design-generate): Extrair uma paleta, construir relacoes acessiveis, gerar tokens e aplicar efeitos CSS coerentes em estados reais de interface.