Construtor de CSS clip-path (polígono, círculo)
Cor
`clip-path` é a propriedade CSS que recorta qualquer elemento DOM em uma forma não retangular — útil para máscaras de imagem, divisores de seção elegantes, cartões decorativos, botões customizados e efeitos de hover estilo Photoshop. A sintaxe é curta mas rigorosa: `circle(r at cx cy)`, `ellipse(rx ry at cx cy)`, `polygon(x1 y1, x2 y2, …)` e `inset(top right bottom left round r)`. Esta ferramenta dá pré-visualização ao vivo com três fundos intercambiáveis (imagem, cor sólida, gradiente) e os parâmetros como sliders / inputs numéricos. Para polígonos você pode editar as coordenadas % de cada vértice, ou clicar em qualquer lugar da pré-visualização para adicionar um novo ponto — útil para traçar formas à mão livre. Dez polígonos preset (triângulo, losango, pentágono, hexágono, estrela, seta, balão de fala, paralelogramo, trapézio, mais) cobrem os casos comuns. A saída é uma declaração clip-path com o prefixo -webkit-clip-path como fallback, pronta para colar em qualquer folha de estilo.
Dica: clique na pré-visualização para adicionar um vértice do polígono ali.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);Sobre clip-path
clip-path suporta formas básicas (círculo, elipse, polígono, inset), CSS `path()` com dados SVG, `url(#id)` referenciando um <clipPath> SVG inline, e palavras-chave de geometry-box. Esta ferramenta emite a forma básica, a mais amplamente suportada e fácil de manter. Todos os % se referem à caixa de referência do elemento (padrão: border-box). O elemento continua ocupando seu layout original — o recorte só afeta a renderização. Para formas curvas complexas, desenhe um SVG <path> e referencie com clip-path: url(#myShape).
Como usar
- Escolha uma forma: círculo (um raio + centro), elipse (dois raios + centro), polígono (3-16 vértices) ou inset (retângulo recortado de cada borda com cantos arredondados opcionais).
- Ajuste com sliders ou inputs numéricos. Para polígonos, clique em qualquer lugar da pré-visualização para adicionar um vértice ali.
- Toque em um preset (triângulo, hexágono, estrela, seta, …) para começar de uma forma conhecida e editar a partir dela.
- Mude o fundo da pré-visualização (imagem, sólido, gradiente) para ver como sua forma ficará sobre conteúdo real.
- Copie o CSS — inclui o `clip-path` moderno e o fallback `-webkit-clip-path` para Safari antigo.
Perguntas frequentes
- Por que clip-path usa porcentagens?
- Porcentagens tornam a forma responsiva: um triângulo `polygon(50% 0%, 100% 100%, 0% 100%)` continua triângulo tendo 100px ou 1000px de largura. Você pode usar px, em, rem, mas para componentes reutilizáveis % quase sempre é o certo. Esta ferramenta só emite % — cole e mude as unidades no CSS se realmente precisar de tamanho fixo.
- O elemento mantém seu espaço original?
- Sim. `clip-path` é puramente efeito de pintura — a caixa de layout do elemento não muda, então o conteúdo ao redor flui pelo retângulo original, não pela forma recortada. Se precisar que o layout respeite a forma visível, use `shape-outside` (outra propriedade), `mask-image` ou um SVG com path.
- Posso animar clip-path?
- Sim, mas só entre paths com o mesmo número de vértices na mesma família de forma — pode animar polígono a polígono com vértices idênticos, ou círculo a círculo, mas não polígono a círculo. Para morphing de polígonos ambos estados precisam ter o mesmo número de pontos em ordem aproximadamente igual. O navegador interpola as coordenadas linearmente.
- Para que serve o valor 'round' do inset?
- É um raio opcional aplicado aos quatro cantos do retângulo inset — mesma sintaxe de `border-radius`. `inset(10% round 5%)` é um clip retangular arredondado. Coloque 0 (sem `round`) para cantos vivos. A spec CSS permite raios diferentes por canto (`round 10% 20% 5% 15%`) mas esta ferramenta usa um valor uniforme único.
- Por que clip-path e -webkit-clip-path?
- Safari precisa do prefixo `-webkit-clip-path` em versões anteriores a 14.1 (2021). Quase todos os navegadores atuais suportam `clip-path` sem prefixo. Emitir ambos não custa nada e protege usuários em aparelhos um pouco mais antigos. Pode remover a linha `-webkit-` se mira apenas navegadores evergreen.
Ferramentas relacionadas
Simulador de Daltonismo
Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).
Gerador de CSS Box Shadow
Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.
Conversor de Formatos de Cor
Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.
Gerador de Paleta de Cores
Crie paletas harmoniosas a partir de uma cor base em seis esquemas.
Verificador de Contraste de Cor
Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.