digtools
✂️
css clip-path generator,

Gerador de clip-path CSS

Um gerador intuitivo para criar formas clip-path CSS via arrastar e soltar.

🖱️
Arrastar e soltar para criar clip-paths intuitivamente
⭐
Suporta CSS padrão e Tailwind
✨
Gera automaticamente código de animação ao passar o cursor (hover)

Editor

Clique para adicionar um vértice. Arraste para mover. Clique direito para excluir.

# X % Y %

Configurações de Visualização

Animação Hover

Se ativado, o código CSS para hover será gerado. Certifique-se de que o número de vértices seja igual.

0.4s

Código Gerado

Você também pode gostar

✨

Gerador de CSS View Transition

🎨

Conversor de Cores

🎨

Seletor de Cores de Imagem

about,

Sobre o Gerador

Crie propriedades clip-path CSS via arrastar e soltar.

Chega de cálculos manuais. Gere o código com um clique.

Suporta várias formas e animações de hover.

how to,

Como Usar

STEP 1

1️⃣ Escolha a Forma

Escolha uma predefinição.

STEP 2

2️⃣ Ajuste

Arraste os vértices.

STEP 3

3️⃣ Copie o Código

Copie e cole no seu CSS ou Tailwind.

property,

Guia de Propriedades

Explicação das funções:

■ polygon() — Polígono

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)
Qualquer número de vértices. Mínimo de 3.

■ circle() — Círculo

clip-path: circle(raio at centroX centroY)
Define o raio e o centro.

■ ellipse() — Elipse

clip-path: ellipse(rx ry at centroX centroY)
Desenha uma elipse.

■ inset() — Recorte Retangular

clip-path: inset(topo direita base esquerda round raio)
Corta as bordas internas. Suporta cantos arredondados.

faq,

FAQ

Q.O clip-path afeta o SEO?
Não. Ele muda apenas a renderização visual.
Q.Diferença entre CSS e SVG?
CSS usa funções em folhas de estilo. SVG é melhor para caminhos muito complexos.
Q.Posso animar no hover?
Sim, desde que o número de vértices seja o mesmo.
Q.Áreas fora do clip-path são clicáveis?
Não. Os eventos não disparam fora da região visível.
Q.Há riscos de segurança?
Nenhum. Tudo roda localmente no seu navegador.
use cases,

Casos de Uso

🎨

Cortes Diagonais

Crie cabeçalhos dinâmicos.

👤

Imagens de Perfil

Recorte avatares em hexágonos ou estrelas.

✨

Animações Hover

Aumente a imagem suavemente ao passar o mouse.

Ferramentas Relacionadas

Geradores CSSVer todas
✨

Gerador de CSS View Transition

Simule animações da View Transition API e gere código para SPA e MPA.

🎨

Conversor de Cores

Converta códigos HEX/RGB/HSL/CMYK e gere paletas de cores.

🎨

Seletor de Cores de Imagem

Extraia cores de imagens e obtenha códigos de cor (HEX/RGB)

↔️

Gerador de CSS Clamp

Calcula automaticamente valores fluidos da função clamp() para design responsivo.

📦

Gerador Container Query CSS

Gere container queries visualmente com pré-visualização e conversão.

🖼️

Gerador Filtros e Mistura CSS

Combine filtros visualmente, gere código e salve imagens.

🎨

Gerador de Gradientes CSS

Gere gradientes lineares, radiais, cônicos e padrões de forma intuitiva.

📐

Gerador de Layout Flexbox/Grid

Gera código de layout com interface visual

☁️

Gerador de Box-Shadow

Cria intuitivamente belas sombras multicamadas

Todas as Categorias

Ferramentas para Desenvolvedores Geradores CSS Ferramentas de Imagem e Foto Ferramentas de Vídeo e Áudio SEO e Marketing Redes e Infraestrutura Análise e Processamento de Texto Ferramentas de Finanças e Salário Ferramentas de Data e Calendário Ferramentas de Documentos e Negócios Jogos e Eventos Vida e Saúde Página Inicial

Enviar feedback

Deixe-nos saber sua opinião para nos ajudar a melhorar a ferramenta.

Aviso Legal

As ferramentas disponibilizadas neste site são totalmente gratuitas, mas devem ser utilizadas por sua conta e risco. Não garantimos a precisão, integridade ou segurança dos resultados de cálculos, conversões ou dados gerados. Esteja ciente de que o operador não assume nenhuma responsabilidade por quaisquer danos ou problemas causados pelo uso dessas ferramentas. A maioria das ferramentas processa arquivos e cálculos localmente no seu navegador, o que significa que os dados inseridos não são enviados nem armazenados em nossos servidores.