Skip to main content
FreeToolkit .ai

Gerador de Caminho de Recorte CSS Crie formas de caminho de recorte CSS com predefinições de polígono, círculo e elipse.

Gerador de Caminho de Recorte CSS illustration
🎨

Gerador de Caminho de Recorte CSS

Crie formas de caminho de recorte CSS com predefinições de polígono, círculo e elipse.

1

Selecione uma forma pré-definida

Escolha entre presets embutidos como triângulo, hexágono, estrela, círculo ou elipse.

2

Personalize o caminho

Edite o valor do clip-path diretamente para ter controle preciso sobre a forma.

3

Copie o CSS

Visualize a forma recortada e copie o CSS com prefixo webkit incluído.

Loading tool...

What Is Gerador de Caminho de Recorte CSS?

O Gerador de Caminho de Recorte do CSS cria máscaras de recorte para elementos HTML usando a propriedade clip-path. O clip-path define uma região visível para um elemento - qualquer coisa fora do caminho é ocultada. Essa ferramenta suporta várias funções de forma: polígono para formas personalizadas multi-ponto, círculo para recortes circulares, elipse para formas ovais e inset para recortes retangulares com arredondamento opcional. Uma biblioteca de formas pré-definidas inclui triângulo, trapézio, paralelogramo, losango, pentágono, hexágono e estrela. Você também pode editar o valor do clip-path diretamente para formas personalizadas. O CSS gerado inclui o prefixo -webkit-clip-path para uma maior compatibilidade com os navegadores. O clip-path é poderoso para criar layouts não retangulares, máscaras de imagem, divisores de seção criativos e formas únicas de elementos da interface do usuário.

Why Use Gerador de Caminho de Recorte CSS?

  • Biblioteca de presets extensa, incluindo polígonos, círculos e estrelas
  • Edição direta dos valores do clip-path para formas personalizadas
  • Inclui prefixo webkit para suporte a mais navegadores
  • Visualização em tempo real com cor de fundo personalizável

Common Use Cases

Máscaras de Imagem

Recorte imagens em formas personalizadas, como círculos, hexágonos ou estrelas.

Divisores de Seção

Crie transições de seção anguladas ou curvas com clip-path.

Layouts Criativos

Construa áreas de conteúdo não retangulares para designs de página únicos.

Fotos de Perfil

Recorte avatares de usuário em formas hexagonais ou arredondadas.

Technical Guide

A propriedade clip-path do CSS aceita várias funções de forma: polygon() define uma forma usando pares de coordenadas como porcentagens ou comprimentos. circle() cria um recorte circular com raio e posição central. ellipse() cria uma oval com raios horizontais e verticais. inset() cria um recorte retangular com arredondamento opcional da borda. A função polígono aceita qualquer número de pares de coordenadas x y, tornando-a a mais flexível. As coordenadas são relativas ao elemento - 0% 0% é o canto superior esquerdo e 100% 100% é o canto inferior direito. Para animações, clip-path pode ser transicionado se a mesma função de forma for usada com o mesmo número de pontos. O suporte dos navegadores é bom nos navegadores modernos, mas o prefixo -webkit- é recomendado para Safari. O clip-path não afeta o layout - o elemento retém suas dimensões originais do modelo de caixa.

Tips & Best Practices

  • 1
    Comece com um preset e modifique os valores para formas personalizadas
  • 2
    Use o mesmo número de pontos de polígono para transições animáveis
  • 3
    Combine com transições CSS para efeitos de revelação e morfismo
  • 4
    clip-path funciona bem em imagens e elementos de fundo

Related Tools

Gerador de Triângulos CSS - free online tool

Gerador de Triângulos CSS

Gere triângulos CSS usando a técnica de borda com controles de direção e cor.

🎨 CSS & Design
Gerador de Bolhas CSS - free online tool

Gerador de Bolhas CSS

Gere formas orgânicas de bolha como SVG com preenchimentos gradientes e randomização.

🎨 CSS & Design
Gerador de Onda CSS - free online tool

Gerador de Onda CSS

Gere divisores de seção em onda SVG personalizáveis com ondas, altura e cores.

🎨 CSS & Design
Gerador de Divisores CSS - free online tool

Gerador de Divisores CSS

Gere divisores de seção em CSS com vários estilos, incluindo gradiente, sombra e zig-zag.

🎨 CSS & Design

Frequently Asked Questions

Q O clip-path afeta o layout do elemento?
Não, o elemento mantém seu modelo de caixa completo. Apenas a renderização visível é afetada pelo recorte.
Q Posso animar o clip-path?
Sim, o clip-path suporta transições CSS quando a mesma função e número de pontos são usados em ambos os estados.
Q O clip-path é suportado em todos os navegadores?
Navegadores modernos suportam clip-path. O prefixo -webkit- garante compatibilidade com o Safari. O IE não suporta clip-path.
Q Posso recortar texto com clip-path?
Sim, o clip-path funciona em qualquer elemento HTML, incluindo contêineres de texto. Use -webkit-background-clip: text para recorte específico de texto.
Q Qual é a diferença entre clip-path e máscara?
O clip-path usa funções de forma para recortar com bordas duras. A máscara CSS usa imagens ou gradientes e suporta bordas macias e transparência parcial.

About This Tool

Gerador de Caminho de Recorte CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.