Toolipedia Incorporar
PT
← Todas as ferramentas de texto

Gerador de CSS clip-path

Arraste pontos para criar polígonos, círculos e formas, depois copie o CSS clip-path.

  • Grátis
  • Sem cadastro
  • Funciona em qualquer dispositivo

Cerca de Gerador de CSS clip-path

Recorte elementos em triângulos, hexágonos, setas, círculos ou qualquer polígono personalizado arrastando pontos em uma visualização e depois copie o valor de clip-path. Coordenadas em porcentagem mantêm a forma responsiva. Lembre-se de que as áreas recortadas ainda existem, então sombras e bordas também são cortadas.

Como usar: Gerador de CSS clip-path

  1. Escolha uma forma, como polígono ou círculo.
  2. Arraste os pontos na prévia para remodelá-la.
  3. Copie o CSS clip-path e aplique ao seu elemento.

Por que usar esta ferramenta?

Também conhecido como

Perguntas frequentes

Por que meu box-shadow é cortado com clip-path?

O clip-path corta tudo o que está fora da forma, inclusive sombras. Coloque a sombra em um wrapper pai, usando filter: drop-shadow, para que ela acompanhe o contorno recortado.

Posso animar entre duas formas de clip-path?

Sim, se as duas formas usarem a mesma função com o mesmo número de pontos. O navegador então move cada ponto suavemente durante uma transição.

O clip-path altera o espaço que o elemento ocupa?

Não. O elemento mantém sua caixa original no layout e apenas a área visível é cortada. Cliques fora da forma visível também são ignorados.

Gerador de CSS clip-path é grátis?

Sim. Gerador de CSS clip-path no Toolipedia é de uso gratuito, sem cadastro e sem marca d'água.

É seguro usar?

Sim. Tudo é calculado no seu navegador, e nada do que você digita é enviado ao nosso servidor.

Funciona no meu celular?

Sim. Funciona em qualquer navegador moderno no Android e no iPhone, além de tablets e computadores. Não é preciso instalar nada.

Preciso de uma conta?

Não. É só abrir a página e usar a ferramenta. Sem cadastro e sem e-mail.

Posso colocar Gerador de CSS clip-path no meu próprio site?

Sim. Use o botão «Incorporar no seu site» abaixo da ferramenta para copiar um trecho curto de código e colá-lo na sua página. É grátis, não precisa de conta e a ferramenta continua funcionando dentro da sua página.

Ferramentas relacionadas