Gerador de Clip Path CSS
Gerador online gratuito de clip-path CSS. Crie formas polygon, circle, ellipse e inset com pontos arrastáveis, visualização ao vivo e cópia do código CSS em um clique.
O que é clip-path em CSS?
clip-path é uma propriedade CSS que recorta um elemento para uma forma básica ou caminho. Tudo fora da forma é ocultado, então você pode transformar uma imagem ou caixa retangular em um triângulo, círculo, hexágono, faixa inclinada ou qualquer polígono personalizado sem editar a imagem.
Quais navegadores suportam clip-path?
Todos os navegadores modernos suportam as funções de forma básicas usadas por este gerador: polygon(), circle(), ellipse() e inset(). Isso inclui Chrome, Edge, Firefox, Safari e Opera. O prefixo -webkit-clip-path só é necessário em versões muito antigas do Safari móvel.
Como funciona o modo polígono?
No modo polígono a visualização mostra cada vértice como um ponto arrastável. Arraste um ponto para movê-lo, dê duplo clique no espaço vazio para inserir um novo, clique em um ponto para selecioná-lo e use o botão excluir para removê-lo. O valor CSS é atualizado em tempo real com coordenadas percentuais.
O que significam as porcentagens em polygon()?
Cada vértice é escrito como um par X Y em porcentagem, medido a partir do canto superior esquerdo do elemento. Como os valores são relativos ao tamanho do elemento, a forma escala junto com ele e permanece responsiva em qualquer largura de tela.
Qual é a diferença entre circle, ellipse e inset?
circle(raio at x y) recorta um círculo com um único raio, ellipse(rx ry at x y) permite raios horizontais e verticais diferentes, e inset(topo direita baixo esquerda) recorta um retângulo encolhido a partir de cada borda. Este gerador oferece sliders e campos numéricos para todos os parâmetros.
O clip-path afeta o layout ou os cliques?
clip-path é puramente visual. O elemento mantém sua caixa original no layout, então nada ao redor se move. Porém, eventos de ponteiro como cliques só funcionam dentro da área visível recortada, o que é útil para botões com formas personalizadas.
Posso animar um clip-path?
Sim. Os navegadores fazem transição suave entre dois valores de clip-path quando a função de forma e o número de pontos coincidem, por exemplo de um inset grande para um pequeno, ou entre dois polígonos com o mesmo número de vértices. Anime com a propriedade CSS transition.
Minha imagem ou dados são enviados para algum servidor?
Não. A imagem de visualização é um gradiente desenhado localmente em um canvas e todos os cálculos acontecem no seu navegador. Nada do que você criar é enviado a servidores, então a ferramenta também funciona offline depois de carregada.
Quais são os usos comuns do clip-path?
Usos populares incluem seções hero diagonais, máscaras de avatar hexagonais ou circulares, pontas triangulares de balões de fala, colagens criativas, cantos de cards chanfrados e botões com formas personalizadas, tudo sem software de edição de imagens.
Como usar Gerador de Clip Path CSS
Dê forma a qualquer elemento com CSS clip-path em vez de editar imagens. Escolha uma função de forma, arraste as alças e copie CSS pronto para produção. Tudo roda localmente no seu navegador.
- Escolha um modo: Polígono, Círculo, Elipse ou Inset.
- No modo Polígono arraste os pontos dos vértices, dê um duplo clique no espaço vazio para adicionar um ponto e selecione um antes de excluí-lo.
- Nos modos Círculo, Elipse e Inset, ajuste cada valor com os controles deslizantes ou digite uma porcentagem exata.
- Observe a prévia ao vivo atualizar sobre uma imagem de amostra com gradiente gerada localmente.
- Copie a regra clip-path de uma linha só e cole na sua folha de estilos.
Mantenha o mesmo número de pontos do polígono entre dois estados e você poderá animar a forma suavemente com uma transição CSS.
Ferramentas relacionadas
- Gerador de Box Shadow CSS Gerador online gratuito de box-shadow CSS. Crie sombras bonitas visualmente com deslocamento, desfoque, expansão, cor e inserção ajustáveis. Visualização ao vivo e cópia instantânea.
- Gerador de Gradientes CSS Crie gradientes CSS impressionantes visualmente. Gere gradientes lineares, radiais e cônicos com múltiplas paradas de cor, ângulos e posições. Copie código CSS pronto para produção instantaneamente.
- Gerador de Border Radius Criativo Gerador de border radius criativo gratuito online. Arraste 8 pontos ou escolha uma forma blob para criar figuras CSS orgânicas e copiar o código na hora.
- Conversor de Cor Conversor de cor online gratuito. Converta formatos HEX, RGB, HSL, HSV instantaneamente com seletor visual. 100% privado, funciona no seu navegador.
- Gerador de Easing CSS Gerador online gratuito de easing CSS. Arraste os pontos de controle do cubic-bezier em uma curva interativa, escolha entre 18 presets, veja uma animação de bola em loop e copie a função de temporização na hora.
- Gerador de Text Shadow CSS Gerador online gratuito de text-shadow CSS. Empilhe várias camadas de sombra com deslocamento, desfoque, cor e opacidade, teste presets como Neon, 3D ou Retrô e copie o CSS na hora.
- Embelezador CSS Formate e embeleze código CSS instantaneamente. Converta CSS minificado em código legível e bem indentado com opções personalizáveis.
- Minificador CSS Minificador CSS online gratuito. Comprima e otimize código CSS instantaneamente removendo espaços, comentários e caracteres desnecessários. Reduza o tamanho do arquivo para melhor desempenho web.