Conversor de cores
Converta HEX, RGB e HSL com transparência, veja a amostra e copie valores CSS prontos para usar.
Gerador de clip-path poligonal
Desenhe um recorte com pontos arrastáveis ou coordenadas numéricas e exporte o CSS da prévia.
Arraste os pontos ou use as setas. Segure Shift para passos maiores. As coordenadas também podem ser editadas diretamente.
CSS
Sobre a ferramenta
Desenhe painéis diagonais ou formas geométricas sem criar uma máscara de imagem.
Como usar
Comece com um triângulo, losango, hexágono ou outra forma. Arraste os vértices, altere as porcentagens X/Y e adicione ou remova pontos. Use Tab para focar um ponto e as setas para ajustar; segure Shift para passos maiores.
O polígono aceita de 3 a 32 pontos, com coordenadas entre 0 e 100%. Os pontos são ligados na ordem da lista, fechando a forma. Copie ou baixe o clip-path: polygon(...) exibido. Não são gerados caminhos curvos nem arquivos de imagem já recortados.
Perguntas frequentes
Aceita curvas ou pontos fora da caixa?
Trabalha com 3–32 vértices e coordenadas de 0% a 100%. Não aceita curvas nem vértices fora desses limites.
Por que surgem recortes inesperados ao mover os pontos do polígono?
Os pontos são ligados na ordem da lista, e o último se conecta ao primeiro. Mover um ponto para o outro lado de uma aresta pode criar um cruzamento. Comece com uma forma pronta e mantenha os vértices na ordem do contorno. Remova pontos desnecessários, mantendo pelo menos três.
Ferramentas relacionadas
Abre em uma nova aba
Comentários
0