Criador CSS Clip-path

Criador CSS Clip-path - Gerador Visual de Formas

CSS clip-path é uma das propriedades mais poderosas mas subutilizadas no CSS moderno — permite recortar qualquer elemento HTML em formas geométricas usando polígonos, círculos, elipses ou retângulos inset, com renderização acelerada por GPU e suporte completo a animações e transições CSS. O detalhe é que a sintaxe é implacável: uma forma de polígono requer pares de coordenadas digitados à mão, e qualquer erro de digitação quebra silenciosamente todo o recorte. Este editor visual permite arrastar pontos em uma visualização ao vivo, alternar entre tipos de forma e aplicar 12 formas predefinidas (triângulo, retângulo, pentágono, hexágono, estrela, seta, galão, cruz, losango, etc.). Você também pode importar um valor clip-path existente para editá-lo visualmente, depois copiar CSS pronto para produção que inclui tanto o prefixo -webkit-clip-path quanto o clip-path sem prefixo, funcionando em Chrome 55+, Firefox 54+, Safari 9.1+ e Edge 79+.

O que é CSS clip-path?

CSS clip-path é uma propriedade que cria uma região de recorte para definir quais partes de um elemento são visíveis. As partes fora da região de recorte ficam ocultas.

Tipos de forma:

polygon() - Formas personalizadas com múltiplos pontos
circle() - Recorte circular
ellipse() - Recorte oval
inset() - Retangular com cantos arredondados opcionais

Posso editar um clip-path existente?

Sim. Cole qualquer valor CSS clip-path existente na caixa Importar clip-path e clique em Importar — a ferramenta detecta o tipo de função, alterna para a forma correspondente e preenche cada ponto ou controle para você ajustar visualmente. Funciona com listas de coordenadas polygon(), circle(R at CX CY), ellipse(RX RY at CX CY) e inset() com abreviação de 1/2/4 valores e um raio 'round' opcional.

Esta é a forma mais rápida de refatorar um clip-path herdado de uma folha de estilos ou design system: em vez de redigitar cada coordenada à mão, cole, arraste os pontos e copie o CSS atualizado. O centro 'at ...' é opcional para círculo e elipse e assume 50% 50% quando omitido.

O que significam closest-side e farthest-side no raio do círculo?

circle() e ellipse() aceitam raios por palavra-chave além de porcentagens. closest-side dimensiona a forma para que sua borda toque o lado da caixa mais próximo do centro, e farthest-side a estende ao lado mais distante. closest-corner e farthest-corner referenciam os cantos da caixa.

Exemplo: circle(closest-side at 50% 50%) sempre cabe dentro do elemento independentemente da proporção. Porcentagens (como circle(40%)) são resolvidas contra um valor de referência derivado da largura e altura do elemento, então um raio em porcentagem pode ultrapassar a caixa em elementos muito não quadrados. Use palavras-chave quando precisar que o recorte fique contido ao redimensionar. Este editor visual trabalha em porcentagens para edição precisa por arraste; mude para raios por palavra-chave manualmente no seu CSS final quando precisar de contenção responsiva.

Como crio um clip-path de polígono?

O clip-path de polígono usa pontos de coordenadas:

Sintaxe: polygon(x1% y1%, x2% y2%, ...)

Cada ponto é definido por porcentagens X e Y:
- 0% 0% = canto superior esquerdo
- 100% 0% = canto superior direito
- 100% 100% = canto inferior direito
- 0% 100% = canto inferior esquerdo

Como funcionam círculo e elipse?

Sintaxe do círculo:
circle(raio at centroX centroY)

Exemplo: circle(50% at 50% 50%)
- Cria um círculo com raio 50%
- Centralizado em 50% 50%

Sintaxe da elipse:
ellipse(raioX raioY at centroX centroY)

Exemplo: ellipse(50% 30% at 50% 50%)

O que é inset clip-path?

Inset cria um recorte retangular com cantos arredondados opcionais:

Sintaxe: inset(topo direita fundo esquerda round raio)

Os valores representam recuo de cada borda:
- inset(10%) - 10% de todos os lados
- inset(10% 20%) - 10% topo/fundo, 20% esquerda/direita

Quais navegadores suportam clip-path?

Suporte de navegador para clip-path:

Suporte completo:
- Chrome 55+
- Firefox 54+
- Safari 9.1+ (pode precisar do prefixo -webkit-)
- Edge 79+
- Opera 42+

Para compatibilidade com Safari, adicione:
-webkit-clip-path: polygon(...);
clip-path: polygon(...);

Nota: clip-path não afeta o layout do elemento - o elemento ainda ocupa todo seu espaço, apenas a área visível muda.

Dica de desempenho: clip-path aciona aceleração GPU, tornando-o eficiente para animações.

Posso animar clip-path com transições CSS?

Sim, mas apenas entre formas do mesmo tipo com o mesmo número de pontos. Animar entre polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) e polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) funciona porque ambos têm 4 pontos; animar de um polígono de 4 pontos para um de 6 pontos NÃO interpola suavemente — o navegador salta para o estado final. Para animar entre formas com diferentes contagens de pontos, defina a forma menor com pontos adjacentes duplicados (um polígono degenerado) para que ambas as formas compartilhem a mesma contagem de vértices. circle() e ellipse() animam limpos para outros círculos e elipses, e inset() anima para outros insets, mas você não pode transitar entre diferentes funções de forma (polygon para circle). Todas as animações são aceleradas por GPU e permanecem suaves a 60fps mesmo em dispositivos móveis.

Qual a diferença entre clip-path, mask-image, overflow:hidden e SVG clipping?

Quatro formas de recortar elementos, cada uma com compromissos. clip-path usa formas geométricas (polígonos, círculos) e dá bordas nítidas com antialiasing; é acelerado por GPU e anima bem. mask-image usa o canal alfa de uma imagem como máscara, então suporta bordas suaves, gradientes e máscaras bitmap arbitrárias — mas é mais pesado para renderizar e menos eficiente para animações. overflow:hidden combinado com um elemento filho é um hack que só produz recortes retangulares; útil para navegadores antigos mas inflexível. SVG <clipPath> é o pai do CSS clip-path e suporta caminhos mais complexos incluindo curvas bezier, mas requer SVG inline e quebra o empilhamento z-index. Escolha clip-path para formas geométricas e animações, mask-image para efeitos de borda suave, SVG clipPath para formas bezier complexas que CSS não pode expressar.

Por que meu clip-path não funciona no Safari iOS?

iOS Safari requer o prefixo -webkit-clip-path além da propriedade clip-path sem prefixo, mesmo em versões modernas iOS 16+. Duas armadilhas adicionais: (1) Safari não permite referências url() para clip paths SVG em arquivos externos — o SVG deve estar inline no mesmo documento; (2) Safari teve historicamente bugs com clip-path em elementos que têm CSS filter ou backdrop-filter aplicado, às vezes ignorando o clip por completo. Use a saída CSS desta ferramenta que inclui versões prefixadas e não prefixadas. Se clip-path ainda falhar no iOS, garanta que seu elemento não esteja aninhado dentro de um pai com filter, transform-style: preserve-3d ou will-change: transform — estes podem quebrar a renderização de clip no WebKit.

Qual o uso prático de clip-path em designs reais?

Padrões comuns de produção: (1) divisores de seção diagonais usando polygon(0 0, 100% 0, 100% 90%, 0 100%) para criar seções de página inclinadas sem HTML extra; (2) grades de avatar hexagonal usando um polígono de 6 pontos para layouts de fotos de equipe em colmeia; (3) efeitos de revelação animada onde texto ou imagens descobrem de um círculo expandindo de um ponto de clique; (4) formas de balão de mensagem para UIs de chat usando um polígono com entalhe; (5) layouts de página estilo Apple cientes de notch que recortam em torno de notches de dispositivo; (6) efeitos hover de imagem que se transformam entre duas variantes de forma. Evite clip-path para elementos muito grandes (>4000px de largura) em dispositivos de baixo desempenho — o custo de rasterização GPU cresce com o tamanho do elemento. Para polígonos complexos (>50 pontos), prefira SVG clipPath que é mais eficiente em memória.

Recursos principais

• 4 tipos de forma: polígono, círculo, elipse, inset
• Edição visual de pontos arrastáveis
• Importar e editar um valor clip-path existente
• Saída inclui o prefixo -webkit- para Safari/iOS
• 12 formas de polígono predefinidas
• Adicionar e remover pontos de polígono
• Entrada numérica precisa para todos os valores
• Visualização ao vivo
• Controles de raio e posição do círculo
• Elipse com raios X/Y independentes
• Inset com suporte a raio de borda
• Copiar código CSS
• Amigável com dispositivos de toque
• Processamento 100% no cliente
• Suporte ao modo escuro
• Interface responsiva