Gerador Clip-Path CSS

Preview

Codigo CSS gerado:
clip-path: circle(50% at 50% 50%);
Animar clip-path
Forma final (keyframe 100%):
Duracao s 

  
  

  

  


  
  

  

  

  
  Controles
  

  


  
  

  
Tipo de Forma

  

  
  
  
  
  

  


  
  

  
Unidade

  

  
  
  

  


  
  


  
  

  
Presets de Polygon

  

  


  
  

  

  
Pontos do Polygon

  
  

  

  

  

  


  
  

  

  
  Referencia de Formas (clique para aplicar)
  

  
Clique em qualquer forma abaixo para aplicar no editor.

  

  


  
  

  
Sobre CSS clip-path

  
A propriedade clip-path permite recortar um elemento em uma forma geometrica, ocultando tudo fora do recorte.

  
    
  
  • circle(r at cx cy) — circulo com raio e centro definidos
    • 
  
  • ellipse(rx ry at cx cy) — elipse com raios horizontal e vertical
    • 
  
  • inset(t r b l round r) — retangulo com cantos opcionalmente arredondados
    • 
  
  • polygon(x1 y1, x2 y2, ...) — poligono de forma livre com N vertices
    • 
  
  • -webkit-clip-path — prefixo necessario para compatibilidade com versoes antigas do Safari
    •