Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Clip-Path CSS

CorDesenvolvedor

ANÚNCIO · REMOVER?

ENTRADA

Processo Automático

Tipo de Forma

Forma

Predefinições

Predefinição

Configurações do Círculo

Raio %: 50

Centro X %: 50

Centro Y %: 50

Configurações da Elipse

Raio X %: 50

Raio Y %: 40

Centro X %: 50

Centro Y %: 50

Configurações de Recorte Interno

Superior %: 10

Direita %: 10

Inferior %: 10

Esquerda %: 10

Raio de Borda %: 0

Opções

Ajustar à Grade (incrementos de 5%)

Mostrar Grade

SAÍDA

Lado cliente

ANÚNCIO · REMOVER?

Guia

Gerador de Clip-Path CSS

Crie visualmente formas de clip-path CSS com um editor intuitivo de arrastar e soltar. Construa polígonos, círculos, elipses e formas de recorte interno, e depois copie o CSS gerado diretamente para suas folhas de estilo.

Como usar

Selecione um tipo de forma ou comece a partir de um modelo predefinido. Arraste os pontos de controle para ajustar a forma visualmente na tela de pré-visualização. O código CSS clip-path é atualizado em tempo real enquanto você edita. Quando estiver satisfeito com o resultado, copie o código CSS gerado ou exporte como SVG.

Características

Editor visual de arrastar e soltar – Crie formas movendo pontos de controle diretamente na tela
Múltiplos tipos de formas – Polígono, círculo, elipse e recorte interno
Modelos predefinidos – Comece com formas comuns como triângulos, estrelas, setas e muito mais
Desfazer e refazer – Suporte completo de histórico para edição não destrutiva
Ajustar à grade – Posicionamento preciso de pontos com ajuste de grade configurável
Exportação SVG – Baixe sua forma como um arquivo SVG
Saída CSS em tempo real – Copie a propriedade clip-path gerada instantaneamente

ANÚNCIO · REMOVER?

 Perguntas frequentes

O que é um clip-path CSS e como funciona?

O clip-path CSS define uma região de recorte que determina quais partes de um elemento são visíveis. Tudo o que estiver fora da forma do clip-path é oculto. Ele suporta formas básicas (círculo, elipse, recorte interno, polígono) e definições de caminho SVG. Ao contrário de overflow:hidden, que apenas recorta para limites retangulares, o clip-path pode criar áreas visíveis não retangulares complexas para layouts criativos e efeitos visuais.
Qual é a diferença entre clip-path e mask em CSS?

Clip-path cria uma borda dura — pixels são totalmente visíveis ou totalmente ocultos com base em se eles caem dentro da forma definida. A máscara CSS usa uma imagem ou gradiente para controlar a transparência, permitindo bordas suaves e transparência parcial. Clip-path é mais simples e mais eficiente para formas geométricas, enquanto as máscaras oferecem mais controle artístico com gradientes e canais alfa.
Como funcionam as coordenadas de polígono CSS?

As coordenadas de polígono em clip-path usam valores de porcentagem ou comprimento relativos à caixa delimitadora do elemento. Cada ponto é definido como um par x,y onde 0% 0% é o canto superior esquerdo e 100% 100% é o canto inferior direito. Os pontos são conectados em ordem para formar a forma. Por exemplo, polygon(50% 0%, 100% 100%, 0% 100%) cria um triângulo. A forma se fecha automaticamente conectando o último ponto ao primeiro.