Gerador de caminhos de recorte CSS

Como usar

1. Escolha um tipo de forma : polígono, círculo, elipse ou inset (retângulo com cantos arredondados opcionais).
2. Arraste os pontos de controle : mova as alças da forma na pré-visualização para personalizar precisamente a área de máscara.
3. Copie o CSS : o valor da propriedade clip-path gerada está pronto para colar na sua folha de estilo.

Por que usar o gerador CSS clip-path ?

O CSS clip-path cria formas não retangulares mascarando tudo o que está fora de uma área definida. É usado para separadores de seções em diagonal, recortes de imagem hexagonais, formas de botão personalizadas, efeitos criativos ao passar o cursor e revelações de imagens mascaradas. Escrever à mão as coordenadas de um polígono clip-path envolve calcular as porcentagens de cada vértice, tedioso e difícil de visualizar. Este gerador interativo permite arrastar pontos visualmente e obter os valores CSS exatos instantaneamente.

Funcionalidades

• Editor de polígono : adicione, mova e remova vértices para criar qualquer forma.
• Predefinições integradas : diagonal, chevron, hexágono, estrela, triângulo e outras formas comuns.
• Modos círculo e elipse : controles visuais para uma máscara circular ou elíptica.
• Modo inset : crie máscaras retangulares com border-radius individual para cada canto.
• Pré-visualização da área mascarada : veja a parte mascarada em destaque para saber exatamente o que será ocultado.

Perguntas frequentes

O clip-path afeta as áreas clicáveis ?

Sim. Por padrão, os eventos de ponteiro só são registrados dentro da área de máscara, a área mascarada é ao mesmo tempo invisível e não clicável. Para tornar o elemento totalmente clicável enquanto o mascara visualmente, use pointer-events: all no elemento ou sobreponha uma camada transparente.

Posso animar clip-path ?

Sim, o clip-path pode ser objeto de transições e animações CSS. Anime entre dois polígonos com o mesmo número de pontos para um efeito de transformação (morphing) fluido. Formas com números de pontos diferentes serão animadas aos saltos em vez de por interpolação.

O clip-path tem suporte em todos os navegadores ?

O clip-path é suportado em todos os navegadores modernos. Para formas SVG via a sintaxe url(#id), o suporte é ainda mais amplo. Os valores básicos polygon, circle, ellipse e inset funcionam universalmente no Chrome, Firefox, Safari e Edge.

O que CSS clip-path realmente faz

A propriedade CSS clip-path mascara um elemento em uma forma escolhida: tudo dentro da forma é visível, tudo fora se torna transparente. A caixa de layout do elemento não muda (ainda ocupa o mesmo retângulo para fins de colapso de margem, fluxo e posicionamento de irmãos), mas apenas os pixels dentro da região de recorte são desenhados. Isso torna clip-path diferente do recorte (que muda permanentemente a imagem) e diferente do posicionamento (que move as coisas): clip-path é uma máscara aplicada no momento da exibição, logo antes dos pixels atingirem a tela.

Existem quatro funções de forma básicas: polygon() (uma lista de vértices como coordenadas de porcentagem ou pixel), circle() (raio mais um centro), ellipse() (dois raios mais um centro) e inset() (um retângulo medido a partir de cada borda, opcionalmente com cantos arredondados). Para formas muito complexas para essas quatro (curvas irregulares, estrelas com recortes côncavos, contornos caligráficos), clip-path também aceita um caminho SVG via path() ou uma referência a um elemento SVG <clipPath> via url(#id). O navegador desenha o elemento, então o compõe através da máscara alfa definida por sua forma.

clip-path importa para o design web moderno porque permite formas que teriam exigido editores de imagem há uma década. Um divisor de seção diagonal, um recorte de imagem hexagonal, um banner em chevron, uma foto em forma de estrela: tudo agora possível em CSS puro, escalável a qualquer tamanho, animável ao hover e acessível porque o elemento subjacente ainda é HTML, não uma imagem rasterizada. O compromisso é a verbosidade: escrever polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) à mão para um diamante simples é viável, mas uma estrela de 12 vértices ou um recorte de logo personalizado é impraticável sem um editor visual. É aí que este gerador entra.

Como esta ferramenta funciona nos bastidores

A pré-visualização é um div com seu clip-path escolhido aplicado como CSS inline, atualizado em cada arrasto de um manípulo de controle. Os manípulos são círculos posicionados absolutamente sobrepostos no topo da pré-visualização nas coordenadas de porcentagem de cada vértice. Quando você arrasta um manípulo, o JavaScript captura o evento mousemove (ou touchmove), converte a posição em pixels para uma porcentagem da área de pré-visualização, atualiza esse vértice no polígono em memória e reaplica a cadeia clip-path. Renderização em tempo real significa que você vê a forma mudar enquanto arrasta, não depois.

O CSS gerado é construído juntando os vértices em uma cadeia de polígono: polygon(x1% y1%, x2% y2%, ...) para o modo polígono, ou circle(r% at cx% cy%), ellipse(rx% ry% at cx% cy%), inset(top right bottom left round radius) para os tipos de forma mais simples. Valores de porcentagem em vez de valores de pixel são usados porque as porcentagens escalam automaticamente com o elemento: um polígono que parece correto em 300x200 também parece correto em 600x400 sem mudança no CSS. A caixa de código atualiza em cada interação, e o botão Copiar CSS escreve o valor atual em sua área de transferência.

Nada sai do seu navegador. A pré-visualização, os cálculos de forma, a geração de CSS e a cópia para a área de transferência são todos JavaScript do lado do cliente. Nenhuma solicitação de rede é feita; nenhuma imagem é enviada; nenhuma análise sobre suas escolhas de forma. A ferramenta não tem backend algum além do HTML estático e JavaScript servidos uma vez no primeiro carregamento. Abra a aba de rede do navegador durante o uso e você verá zero solicitações após o carregamento inicial da página. O CSS que você gera é seu para colar em qualquer folha de estilo.

Breve história do recorte CSS

• SVG clipPath, 2001.A especificação SVG 1.0 (Recomendação W3C, setembro de 2001) introduz <clipPath>, permitindo que qualquer elemento SVG seja mascarado por outra forma. O recorte SVG lida com caminhos complexos mas requer marcação SVG inline, limitando a reutilização em páginas HTML simples sem fluência em SVG.
• Propriedade CSS clip, 1998 a 2010s.A propriedade CSS clip original (especificação CSS 2, 1998) só suportava rect(), um recorte retangular de quatro valores em elementos posicionados absolutamente. Limitada e descontinuada em 2014, mas ainda vista em padrões CSS legados de «somente leitor de tela» onde o conteúdo visível é recortado para 1x1 pixel para acessibilidade.
• Módulo CSS Masking Nível 1, 2014.O W3C publica a especificação CSS Masking Module Nível 1 (abril de 2014), introduzindo a propriedade clip-path moderna com suporte a polygon, circle, ellipse, inset e SVG-path. Chrome 24 (janeiro de 2013) e Safari 7 (junho de 2013) lançam as formas básicas antes da especificação formal; Firefox segue na versão 54 (junho de 2017).
• Onda de web design brutalista Adobe, 2015 a 2017.Seções herói com cortes diagonais, divisores de banner angulados e grades de fotos de equipe hexagonais se tornam uma tendência de design, impulsionada por ferramentas como Webflow e artigos de design no CSS-Tricks. Portfólios estilo Awwwards destacam truques de clip-path proeminentemente, e a propriedade vai de «curiosidade CSS obscura» para «técnica moderna esperada».
• Internet Explorer morre, 2022.A Microsoft aposenta o Internet Explorer em 15 de junho de 2022, encerrando a última barreira de navegador significativa para recursos CSS modernos, incluindo clip-path. Por 2023, «suporta clip-path?» deixa de ser uma preocupação séria entre navegadores, e a propriedade se torna uma ferramenta padrão no design somente CSS.
• Função CSS shape(), 2024 e além.O Módulo CSS Shapes continua evoluindo com propostas como shape() (uma alternativa mais flexível ao path() usando sintaxe amigável ao CSS em vez de cadeias de caminho SVG), permitindo formas complexas sem o switch de contexto SVG. O suporte do navegador está sendo lançado durante 2025 e 2026.

Fluxos do mundo real

• Cortes diagonais de seção herói.O padrão «herói trapezoidal» onde a borda inferior de uma seção herói é angulada diagonalmente em vez de horizontal é um dos usos mais populares de clip-path. Um simples polygon(0 0, 100% 0, 100% 90%, 0 100%) cria uma inclinação de 10% inferior-esquerda para superior-direita. Adicione uma segunda seção abaixo com a inclinação inversa e você obtém um layout «papel rasgado» ou «ângulos empilhados» que parece deliberado sem precisar de imagens.
• Grades de avatares hexagonais.Páginas de equipe, listas de colaboradores ou escalações esportivas frequentemente usam recortes de fotos hexagonais como uma alternativa mais dinâmica aos avatares redondos. Um polígono de seis vértices clip-path cria o hexágono; CSS grid organiza o layout de favo de mel escalonado. Comparado a recortar no Photoshop, as fotos permanecem originais e não modificadas: mude a orientação hex ou troque por círculos com uma única edição CSS.
• Efeitos de revelação de imagem ao hover.Animar clip-path ao hover cria «revelações de imagem» onde uma porção recortada se expande suavemente. Padrões comuns: uma imagem começa como um pequeno círculo e se expande para cobertura total ao hover, ou um polígono começa como uma fatia fina e cresce em um retângulo completo. A transição CSS no clip-path interpola entre dois polígonos com o mesmo número de vértices suavemente, produzindo animações a 60fps sem JavaScript.
• Formas de botão personalizadas.UI de jogos, interfaces futuristas e portfólios criativos frequentemente usam botões não retangulares (formas de seta, hexágonos, paralelogramos). clip-path mascara um elemento de botão padrão para a forma escolhida, mantendo o botão subjacente acessível (ainda focável, ainda clicável pelo teclado, ainda anunciável por leitores de tela) enquanto apresenta um visual personalizado.
• Divisores de seção decorativos.Divisores de onda, divisores de chevron e divisores de «página rasgada» entre seções de página costumavam exigir imagens SVG de fundo ou imagens por seção. clip-path os produz em CSS puro usando ou um inset com cantos arredondados ou um polígono seguindo a onda desejada. Os divisores escalam e respondem automaticamente às mudanças de layout.
• Galerias de fotos criativas.Layouts de galeria de fotos usando miniaturas retangulares uniformes parecem genéricos; recortar cada miniatura para uma forma de polígono ligeiramente diferente produz uma sensação de colagem feita à mão sem mascarar manualmente cada imagem. Um pequeno conjunto de 3 a 5 variantes de polígono ciclado pela grade cria ritmo visual enquanto permanece performante (a mesma forma é apenas aplicada por transformação a diferentes fontes de imagem).

Armadilhas comuns e o que significam

• clip-path não muda o layout.Uma surpresa comum: recortar um elemento para uma forma menor não reduz o espaço que ele ocupa no fluxo do documento. O elemento ainda ocupa sua caixa de layout completa; clip-path apenas muda o que é desenhado. Para obter um elemento que fisicamente ocupe menos espaço, você também precisa redimensioná-lo. Se você quer que o conteúdo recortado realmente recorte, use overflow: hidden em um wrapper, ou use CSS mask com uma caixa de layout menor.
• Incompatibilidade de proporção quebra coordenadas porcentuais.Coordenadas de polígono expressas como porcentagens escalam uniformemente com o elemento. Uma forma de diamante polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) permanece um diamante em qualquer tamanho, mas se torna um romboide mais largo ou mais alto se a proporção do elemento mudar. Para formas que precisam permanecer visualmente consistentes entre proporções, use valores de pixel ou cálculos min(50vw, 50vh), ou restrinja a proporção do elemento com a propriedade CSS aspect-ratio.
• Regiões recortadas não são clicáveis.Eventos de ponteiro só se registram onde o elemento é visível após o recorte. Um botão recortado para um triângulo só é clicável no triângulo, não no espaço retangular invisível que ocupa. Isso geralmente é desejado (sem cliques acidentais em espaço vazio), mas pode ser confuso quando múltiplos botões recortados se sobrepõem ou quando conteúdo interativo se estende visualmente fora da região de recorte.
• Animar muitos elementos recortados é caro.clip-path dispara composição em cada frame de animação, o que pode reduzir taxas de quadros se aplicado a muitos elementos simultaneamente ou em elementos grandes (seções herói de tela cheia). Para animações a 60fps, limite o número de elementos recortados sendo animados simultaneamente, prefira formas mais simples (polígonos de 4 a 6 vértices em vez de 20), e considere usar CSS will-change: clip-path em elementos que você planeja animar para sugerir ao navegador acelerá-los com GPU.
• Polígonos precisam de contagem de vértices correspondente para transformar.Animar clip-path entre duas formas de polígono funciona apenas se ambos polígonos têm o mesmo número de vértices. Ir de um triângulo (3 pontos) para um quadrado (4 pontos) salta instantaneamente em vez de transformar suavemente. Para transformação suave entre formas com diferente complexidade visual, defina ambos polígonos com o mesmo número de pontos, colocando os extras em coordenadas que «escondem» em uma das formas (por exemplo, dois pontos um em cima do outro).
• Safari requer o prefixo -webkit- para sintaxe de caminho SVG.As formas básicas (polygon, circle, ellipse, inset) funcionam sem prefixo em todos os navegadores modernos. Mas o Safari ainda requer o prefixo -webkit-clip-path ao usar a função path() ou referenciar clipPaths SVG url(#id). Para compatibilidade entre navegadores, declare tanto -webkit-clip-path quanto clip-path com o mesmo valor para recorte baseado em SVG-path. Auto-prefixadores (Autoprefixer, PostCSS) lidam com isso automaticamente em configurações de build modernas.

Privacidade: tudo roda em seu navegador

Ferramentas geradoras CSS tradicionalmente caem em dois campos: páginas HTML simples com JavaScript do lado do cliente (privadas, rápidas, sem necessidade de conta) e editores completos com projetos salvos em nuvem (colaborativos, mas cada edição de forma é registrada no servidor de outra pessoa). Esta ferramenta está firmemente no primeiro campo. As coordenadas de polígono que você arrasta, as cores que você escolhe, o CSS que você copia: tudo permanece na sua sessão do navegador, nunca enviado para lugar nenhum. Atualize a página e o estado se vai a menos que você tenha copiado o CSS primeiro.

A implicação de privacidade importa principalmente para trabalho proprietário. Uma agência de design prototipando uma forma de botão personalizada para um redesign de marca confidencial, um desenvolvedor independente trabalhando em uma UI de jogo não anunciada, uma equipe corporativa projetando layouts para um produto ainda sob NDA: qualquer contexto onde a forma em si ou seu histórico de iteração poderia vazar informação sobre trabalho em andamento. Com esta ferramenta, nenhum desses riscos existe porque nada é capturado. Abra a aba Rede do navegador enquanto arrasta os manípulos e você verá zero solicitações de saída.

Quando outra ferramenta é a escolha certa

• Editores SVG para caminhos complexos.Para curvas irregulares, formas caligráficas ou qualquer coisa além das funções de forma básicas, desenhar a forma no Figma, Inkscape ou Adobe Illustrator e exportar como caminho SVG é mais prático que codificar à mão as coordenadas do clip-path. Então use clip-path: path('M...') ou referencie o SVG pelo ID. Editores SVG fornecem manípulos bezier e precisão; geradores clip-path não.
• CSS mask para mesclagem alfa e gradientes.clip-path produz um alfa binário (totalmente visível ou totalmente recortado). Para formas de bordas suaves (fades de gradiente, curvas anti-aliased, transparência parcial), CSS mask ou mask-image lida com gradientes alfa completos. mask suporta uma imagem de máscara (qualquer PNG, SVG ou gradiente) onde pixels pretos escondem e pixels brancos mostram, com cinzas dando opacidade parcial. clip-path não pode fazer isso.
• Processamento de imagem para recortes permanentes.Se você quer que o arquivo de imagem final em si seja recortado para uma forma (tamanho de arquivo menor, sem overhead de clip-path, sem risco de fallback não recortado), faça o recorte em um editor de imagem ou na nossa ferramenta Image Compressor. clip-path é para mascaramento em tempo de exibição em elementos HTML; se o alvo é um ativo de imagem estático, recorte o arquivo diretamente.
• Figma ou Sketch para protótipos de design.Enquanto prototipa um layout, as ferramentas vetoriais do Figma lidam com exploração de formas complexas mais rápido do que arrastar manípulos clip-path. Use a ferramenta de design para encontrar a forma que você quer, então traduza a forma final em CSS clip-path para produção. A ferramenta de design também lida com iterações, histórico de desfazer e comentários de equipe melhor que um gerador CSS em tempo real.

Mais perguntas frequentes

Posso usar porcentagens ou pixels para coordenadas de vértice?

Ambos funcionam. Porcentagens escalam com a caixa do elemento, então um polígono definido em porcentagens mantém sua forma proporcional quando o elemento redimensiona. Pixels são absolutos, então um polígono com coordenadas em pixel mantém o mesmo tamanho independentemente do elemento. Use porcentagens para formas que devem redimensionar com o layout (a maioria dos casos) e pixels para formas que precisam de posições de pixel exatas (por exemplo, alinhamento a um elemento de design específico). Você também pode misturar: polygon(50% 10px, 100% 50%, ...) é válido.

clip-path afetará SEO ou leitores de tela?

Não. clip-path é uma propriedade puramente visual. O HTML subjacente é totalmente acessível: texto dentro de um elemento recortado ainda é indexado por motores de busca, ainda anunciado por leitores de tela, ainda selecionável por navegação de teclado. Use clip-path para estilo visual; não o use como forma de esconder conteúdo semanticamente (isso requer display: none ou atributos aria-hidden). Conteúdo visualmente recortado permanece presente na árvore de acessibilidade.

Como faço um clip-path responsivo?

Use porcentagens em vez de pixels, e verifique o resultado em diferentes breakpoints. Para formas que precisam de proporções diferentes em mobile versus desktop, use media queries CSS para trocar o valor clip-path: declare um clip-path diferente dentro de @media (max-width: 768px) para a forma mobile. Para necessidades responsivas complexas (por exemplo, um polígono que vira círculo em mobile), considere usar JavaScript para recalcular o clip-path baseado no tamanho da janela, embora abordagens puras de CSS lidem com a maioria dos casos.

clip-path pode ser aplicado a vídeos e iframes?

Sim. clip-path funciona em qualquer elemento HTML, incluindo <video> e <iframe>. A máscara se aplica no nível do elemento, então um vídeo recortado para um hexágono toca dentro desse hexágono. Os controles de vídeo (quando exibidos) também são recortados, o que pode esconder inadvertidamente botões de reproduzir/pausar; embrulhe o vídeo em um elemento contêiner se você precisa que os controles sejam visíveis fora da área recortada.

Qual é o número máximo de vértices de polígono?

Não há limite formal especificado pelo padrão CSS. Praticamente, navegadores lidam com polígonos com centenas de vértices sem erros de renderização, mas o desempenho degrada com a contagem de vértices, especialmente para clip-paths animados. Vise 3 a 12 vértices para a maioria das formas decorativas; se você precisa de mais complexidade, mude para path() SVG para autoria mais limpa e características de desempenho similares. Além de 50 vértices, clip-path se torna mais difícil de manter à mão e um fluxo de trabalho de editor SVG faz mais sentido.

Posso recortar texto em vez de apenas imagens e caixas?

Sim. clip-path funciona em elementos de texto também, mascarando-os como qualquer outro elemento. O efeito visual é «texto espreitando através de uma forma». Para efeitos de forma de texto mais sofisticados (por exemplo, usando um contorno de texto como máscara de recorte para uma imagem), combine clip-path com background-clip: text, que usa a forma do texto em si como região de recorte para o fundo do elemento. Padrão comum: texto grande com um fundo gradiente visível apenas dentro das formas do texto.