Categoria: Desenvolvimento
Gerador de Clip-Path CSS
Escolha uma forma e copie seu valor de clip-path
Escolha uma forma, de um círculo ou elipse a um hexágono, seta ou balão de fala, ajuste o quanto ela recua das bordas, e copie o valor de clip-path resultante com uma prévia ao vivo.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
Escrever um polígono de clip-path à mão significa plotar a posição percentual de cada ponto e imaginar como eles se conectam, o que é lento para iterar em qualquer coisa além de um triângulo simples. Esta ferramenta traz um conjunto de formas comuns como listas de pontos já prontas, além de um único controle de recuo que escala cada ponto em direção ao centro da mesma forma para qualquer figura, então você pode pré-visualizar e copiar um clip-path utilizável sem fazer a geometria você mesmo.
Como usar
- Escolha uma forma.
- Ajuste o recuo para aumentá-la ou diminuí-la dentro da sua caixa.
- Copie a declaração clip-path.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Por que círculo e elipse se comportam de forma diferente das outras formas?
- circle() e ellipse() recebem um raio, então o recuo ali encolhe o raio diretamente, enquanto as formas em polígono escalam cada ponto em direção ao centro pela mesma porcentagem.
- clip-path afeta o layout ou só o que é visível?
- Só o que é visível. O elemento mantém sua caixa original para fins de layout; clip-path apenas esconde as partes fora da forma, da mesma forma que overflow: hidden esconde conteúdo fora de uma caixa.
- Algo é enviado a um servidor?
- Não. Os pontos da forma são calculados na página a partir da forma e do recuo escolhidos, por isso a prévia se atualiza na hora.