CSS Clip-Path Maker
Arraste pontos no canvas para modelar seu clip-path. Escolha presets, mude modos, copie o CSS.
① Escolha um preset ou arraste as alças ② Alterne entre polygon, circle e ellipse ③ Copie o CSS
Presets de formaModo
Saída CSS
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
O que é CSS clip-path?
A propriedade CSS clip-path cria uma região de recorte que controla qual parte de um elemento é visível. Com polygon() você define coordenadas percentuais formando uma forma fechada. circle() e ellipse() permitem recortes circulares ou ovais. clip-path é totalmente acelerado por hardware e pode ser animado com transições CSS.
Perguntas Frequentes
clip-path é uma propriedade CSS que restringe a área visível de um elemento a uma forma definida. Apenas os pixels dentro da região de recorte são renderizados. Usado para cortes criativos, máscaras de imagem e transições animadas.
Cada par de valores em polygon() é uma coordenada (x%, y%) relativa ao bounding box do elemento. (0% 0%) é o canto superior esquerdo, (100% 100%) o inferior direito.
polygon() aceita pares de coordenadas para formas de bordas retas. circle(r at cx cy) cria um recorte circular. ellipse(rx ry at cx cy) um oval. Todos aceitam valores percentuais.
.el { clip-path: polygon(...); transition: clip-path 0.5s ease; } .el:hover { clip-path: polygon(...); }. O navegador interpola cada par de coordenadas.
clip-path com polygon(), circle() e ellipse() é totalmente suportado no Chrome, Edge, Firefox e Safari sem prefixos. Suporte global superior a 97%.
Divisores de seção diagonais, galerias com máscaras hexagonais, revelações animadas do hero, overlays de vídeo com forma de mockup, regiões de mapa interativas.
CSS clip-path se aplica diretamente a elementos HTML e é fácil de animar. SVG <clipPath> é definido no markup SVG e referenciado com clip-path: url(#id). SVG suporta caminhos complexos e texto como máscaras.