Gerador de Clip-Path CSS

Esta ferramenta gera um valor CSS clip-path a partir de uma forma predefinida — círculo, elipse, triângulo, pentágono, hexágono, estrela ou um retângulo arredondado — e mostra a forma recortada em tempo real numa caixa de pré-visualização antes de copiares o CSS. Não é preciso calcular à mão as coordenadas de polygon() para formas comuns.

O que é esta ferramenta?

clip-path é a propriedade CSS que oculta tudo o que está fora de uma região definida de um elemento, deixando visível apenas a forma interior — o resto da caixa do elemento continua presente no layout, simplesmente não é pintado. Aceita funções de forma básica como circle(), ellipse(), inset() e polygon(), sendo que esta última recebe uma lista arbitrária de pares de coordenadas x/y para definir qualquer forma de bordas retas.

As coordenadas de polygon() são a parte mais difícil de escrever à mão — um pentágono, hexágono ou estrela precisam cada um de vários pontos posicionados com precisão, e errar um deles distorce toda a forma. Esta ferramenta calcula essas coordenadas por ti a partir de uma forma predefinida, atualiza a pré-visualização em tempo real instantaneamente, e dá-te o CSS clip-path exato para copiar.

Fonte: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — as especificações que definem clip-path e as suas funções de forma básica.

Por que usar?

A pré-visualização em tempo real recorta uma caixa de pré-visualização real na forma escolhida, para veres o resultado real em vez de imaginá-lo a partir de coordenadas.
Sete formas predefinidas — círculo, elipse, triângulo, pentágono, hexágono, estrela e retângulo arredondado — cobrem a grande maioria dos casos de uso de clip-path sem escrever pontos de polygon() à mão.
As formas de círculo, elipse e retângulo arredondado incluem um controlo deslizante de tamanho/arredondamento para ajustares a forma sem editar coordenadas.
Gera CSS clip-path padrão pronto a colar em qualquer elemento.
Funciona inteiramente no seu navegador — nada do que você configura é enviado para lado nenhum. Grátis, sem registo, funciona em celular.

Como usar

Escolhe uma forma no menu suspenso — círculo, elipse, triângulo, pentágono, hexágono, estrela ou retângulo arredondado.
Para as formas de círculo, elipse e retângulo arredondado, ajusta o controlo deslizante de tamanho/arredondamento para afinar o recorte.
Observa a caixa de pré-visualização a atualizar-se em tempo real ao alterares a forma ou o controlo deslizante.
Copia o CSS clip-path gerado e cola-o no elemento que queres recortar.
Para uma imagem em vez de uma cor sólida, aplica a mesma propriedade clip-path a uma tag <img> ou a um elemento com uma background-image.

Exemplo

Entrada

Forma: Hexágono

Resultado

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Um recorte hexagonal regular, comummente usado para fotos de perfil estilo distintivo ou ícones de funcionalidades.

Formas básicas vs. polygon()

Círculo, elipse e inset (retângulo arredondado) são funções de forma básica incorporadas no CSS com a sua própria sintaxe simples — um ou dois raios, mais uma posição central opcional ou arredondamento de cantos. Triângulo, pentágono, hexágono e estrela não são formas incorporadas; todas são expressas com polygon(), uma lista plana de pares de coordenadas x/y que traça o contorno da forma. Esta ferramenta calcula automaticamente essas coordenadas para polígonos regulares (espaçados uniformemente) e uma estrela de cinco pontas, que é a parte tediosa de acertar à mão.

Padrões comuns de clip-path

Avatar ou distintivo circular: circle() com um raio médio, frequentemente combinado com uma imagem de origem quadrada para que o círculo não fique esticado numa elipse.
Divisor de secção em ângulo: um polígono personalizado (não incluído como predefinição aqui) que inclina a margem superior ou inferior de uma secção de largura total para uma quebra de página não retangular.
Ícone ou distintivo de avaliação em estrela: a predefinição de estrela, útil como forma decorativa em vez de um SVG desenhado à mão para casos simples.
Grelha de fotos hexagonal: imagens recortadas em hexágono dispostas num padrão em favo de mel, um padrão comum em páginas de portefólio/equipa.
Retângulo arredondado como alternativa leve ao border-radius quando também precisas que o recorte corte o conteúdo filho que transborda, já que o border-radius sozinho não recorta os filhos sem um overflow:hidden adicional.

Combinar com outras ferramentas CSS

clip-path é frequentemente combinado com um degradê CSS como o fundo a ser recortado, ou com um box-shadow aplicado a um elemento envolvente (já que clip-path também recorta a própria sombra do elemento, uma sombra num elemento pai é a solução habitual para uma forma recortada que ainda precisa de parecer que está a flutuar).

→ Gerador de Gradientes CSS · Gerador de Border Radius · Gerador de Box Shadow

Perguntas frequentes

O clip-path afeta o tamanho de layout do elemento?

Não — o elemento mantém o seu tamanho e posição de caixa originais para efeitos de layout; clip-path apenas altera o que é pintado. Os elementos à volta são dispostos como se o recorte não tivesse sido aplicado, o que pode surpreender-te se esperares que a forma recortada se comporte como um elemento redimensionado.

Por que o meu box-shadow não aparece na forma recortada?

O clip-path recorta toda a renderização do elemento, incluindo qualquer sombra que projete, por isso o box-shadow de um elemento recortado em círculo ou polígono é cortado no limite do recorte. Para obter uma sombra que siga a forma visível, aplica box-shadow a um elemento envolvente não recortado à volta do elemento recortado.

Posso animar ou fazer uma transição numa forma clip-path?

Sim, mas apenas entre dois valores clip-path do mesmo tipo e com o mesmo número de pontos — por exemplo, um polygon() com 6 pontos a transicionar para outro polygon() com 6 pontos. Fazer uma transição entre formas fundamentalmente diferentes (um circle() para um polygon()) geralmente não anima de forma suave entre navegadores.

O clip-path pode ser usado em imagens de fundo, não apenas no conteúdo do elemento?

O clip-path recorta todo o elemento — incluindo o seu background-image, background-color, bordas e conteúdo em conjunto — em vez de apenas o fundo especificamente. Se quiseres apenas recortar uma imagem de fundo mantendo o restante conteúdo sem recorte, aplica clip-path a um elemento separado que contenha apenas o fundo.

O clip-path é suportado em todos os navegadores modernos?

Sim — o clip-path com funções de forma básica (circle, ellipse, inset, polygon) é Baseline e está amplamente disponível nos principais navegadores desde janeiro de 2020, de acordo com os dados de compatibilidade do MDN. Geralmente é seguro usá-lo em produção sem um fallback para versões atuais dos navegadores.