CSS Clip-Path Maker
Arrastra puntos en el canvas para dar forma al clip-path. Elige presets, cambia modos, copia el CSS.
① Elige un preset o arrastra las manijas ② Cambia entre polygon, circle y ellipse ③ Copia el CSS
Presets de formaModo
Salida CSS
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
¿Qué es CSS clip-path?
La propiedad CSS clip-path crea una región de recorte que controla qué parte de un elemento es visible. Con polygon() defines coordenadas porcentuales que forman una forma cerrada. circle() y ellipse() permiten recortes circulares u ovalados. clip-path está completamente acelerado por hardware y puede animarse con transiciones CSS.
Preguntas Frecuentes
clip-path es una propiedad CSS que restringe el área visible de un elemento a una forma definida. Solo los píxeles dentro de la región de recorte se renderizan. Se usa para cortes creativos, máscaras de imagen y transiciones animadas.
Cada par de valores en polygon() es una coordenada (x%, y%) relativa al bounding box del elemento. (0% 0%) es la esquina superior izquierda, (100% 100%) la inferior derecha.
polygon() acepta pares de coordenadas para formas de bordes rectos. circle(r at cx cy) crea un recorte circular. ellipse(rx ry at cx cy) uno ovalado. Todos aceptan valores porcentuales.
.el { clip-path: polygon(...); transition: clip-path 0.5s ease; } .el:hover { clip-path: polygon(...); }. El navegador interpola cada par de coordenadas. Recuentos de puntos no coincidentes no pueden animarse.
clip-path con polygon(), circle() y ellipse() está completamente soportado en Chrome, Edge, Firefox y Safari sin prefijos. Soporte global superior al 97%.
Divisores de sección diagonales, galerías con máscaras hexagonales, revelaciones animadas del hero, overlays de video con forma de mockup, regiones de mapa interactivas.
CSS clip-path se aplica directamente a elementos HTML y es fácil de animar. SVG <clipPath> se define en markup SVG y se referencia con clip-path: url(#id). SVG soporta rutas complejas y texto como máscaras.