Pular para o conteúdo principal
iotools.cloudiotools.cloud

Gerador de Clip-Path CSS

Gere uma declaração CSS clip-path — círculo, elipse, inset ou uma forma de polígono (triângulo, hexágono, estrela, seta e muito mais) com uma lista de pontos personalizados editável — com uma visualização ao vivo da forma recortada.

Entrada

Escolha uma forma básica ou um preset de polígono, ou escolha Polígono personalizado para editar manualmente os vértices.

Saída

Sua forma recortada aparecerá aqui.

CSS
Snippet HTML (visualização)

Div com estilos inline correspondendo à visualização acima — cole em qualquer lugar.

Isso foi útil?

Mais formas de usar esta ferramenta

API REST

curl -X POST https://api.iotools.cloud/v1/tool/css-clip-path-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "shapeType": "circle",
    "circleRadius": "50",
    "circleCx": "50",
    "circleCy": "50"
  }'

Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.

Peça a um agente de IA

Use the IOTools `css-clip-path-generator` tool (CSS Clip-Path Generator) on this input:

YOUR_INPUT_HERE

Cole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.

Widget para incorporar

<iframe
  src="https://iotools.cloud/embed/css-clip-path-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Gerador de Clip-Path CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Coloque isso na sua própria página — grátis, sem chave, só um link de volta.

Custo por chamada de API/MCPA partir de 5 créditos
Precisa de mais créditos?Ver preços

Também disponível via

IntegraçõesExtensão de navegadorExtensão para VS Code

Guias

O que é clip-path?

clip-path é uma propriedade CSS que oculta tudo fora de uma forma que você define, deixando apenas a parte dentro visível — sem necessidade de editor de imagem, arquivo de máscara ou marcação extra. É assim que você obtém avatares circulares, insígnia hexagonal, divisores de seção angulados, botões em forma de seta e callouts de bolha de fala usando apenas CSS em um <div> ou <img> comum.

Esta ferramenta cria uma declaração clip-path pronta para colar a partir de um seletor de forma, com uma visualização ao vivo do exatamente o que o CSS produz.

Como usar esta ferramenta

  1. Escolha uma Forma — uma forma básica (Círculo, Elipse, Inset) ou um dos presets de polígono (Triângulo, Losango, Pentágono, Hexágono, Octógono, Estrela, Mensagem, Seta, Cruz, Chevron, Paralelogramo, Trapézio).
  2. Ajuste-o:
    • Círculo — Raio e Centro X/Y, todos como porcentagens da própria caixa do elemento.
    • Elipse — Raio X/Y independente mais Centro X/Y.
    • Inset — Inscrições Superior/Direita/Inferior/Esquerda (o quanto cada borda se afasta da caixa) mais um Raio de Canto opcional para retângulos arredondados.
    • Presets de polígono são formas fixas — escolha Polígono personalizado para editar manualmente a lista de vértices (veja abaixo).
  3. Para Polígono personalizado, edite o campo Pontos do Polígono: uma lista separada por vírgulas de pares x% y%, um por vértice, percorrendo a forma em ordem (mínimo 3). Cada preset de polígono acima é realmente apenas uma dessas listas sob o capô — copie as coordenadas polygon(...) de saída de um preset neste como ponto de partida se quiser ajustar um.
  4. Copie o CSS e aplique-o a qualquer elemento — clip-path funciona em imagens, divs, botões, qualquer coisa com uma caixa. A Visualização mostra exatamente o que parece; o Snippet HTML abaixo é a mesma marcação que um <div> com estilos inline independentes que você pode colar em qualquer lugar que uma folha de estilos não seja conveniente.

Por que ambos clip-path e -webkit-clip-path?

A propriedade clip-path sem prefixo é suportada em todos os navegadores atuais, mas a forma com prefixo -webkit- é incluída junto com ela para navegadores WebKit mais antigos que apenas reconheciam a versão com prefixo — uma linha de compatibilidade barata que não custa nada em navegadores modernos.

FAQ

Posso animar clip-path? Sim — clip-path é animável, portanto, fazer a transição entre dois valores do mesmo tipo de forma (por exemplo, dois polygon()s com o mesmo número de pontos, ou dois raios circle()) anima suavemente com um CSS transition simples. Esta ferramenta gera um valor estático único; adicione sua própria transition: clip-path 0.3s ease; junto com ele.

Todos os vértices do polígono precisam usar %? Esta ferramenta sempre emite porcentagens, que se dimensionam com o tamanho do próprio elemento (a escolha mais portável). Você pode editar manualmente o CSS copiado para usar px se precisar de uma forma de tamanho fixo.

Por que os percentuais do polígono parecem "errados" para o preset Star? Uma estrela de 10 pontos tem pontos que alternam entre um raio externo e um raio interno mais curto do centro da forma — os percentuais não se destinam a parecer uniformes, eles rastreiam os picos e entalhes internos da estrela.

O clip-path afeta os destinos de clique/hover? Não — clicar fora da área visível recortada ainda atinge a caixa original (não recortada) do elemento na maioria dos navegadores, a menos que você também restrinja eventos de ponteiro (por exemplo, pointer-events: none mais uma sobreposição recortada, ou retrabalhe o layout para que a caixa seja a forma).

Privacidade

Tudo acontece no seu navegador. Sua forma e configurações escolhidas nunca são enviadas a um servidor — o CSS e a visualização são gerados e atualizados localmente conforme você ajusta os controles.

cssclip-pathgeneratorpolygonshapeweb design

Ama as ferramentas? Livre-se dos anúncios.

Um único pagamento remove todos os anúncios da sua conta, para sempre. Sem assinatura, sem rastreamento.

Remover anúncios