Generador de Clip-Path CSS
Elige una forma predefinida, dibuja tu propio polígono arrastrando puntos, o ajusta un círculo/óvalo/recorte con controles. Copia el código clip-path listo para pegar en tu CSS.
Arrastra los puntos para mover. Doble clic sobre un punto para borrarlo (mínimo 3).
Preguntas frecuentes
Sobre la propiedad CSS clip-path
¿Qué navegadores soportan clip-path?
Todos los navegadores modernos (Chrome, Firefox, Safari, Edge) soportan clip-path con la sintaxis polygon() sin necesidad de prefijos.
¿Puedo usar esto en un fondo en vez de una imagen?
Sí, la propiedad clip-path funciona igual en cualquier elemento HTML, no solo en imágenes — divs, secciones, botones, lo que necesites recortar.
¿El recorte afecta el rendimiento del sitio?
No de forma significativa. clip-path es una propiedad optimizada por el navegador y es segura de usar en producción.
¿Puedo crear una forma completamente personalizada?
Sí, usa la pestaña "Editor personalizado" para arrastrar puntos y dibujar tu propio polígono, agregar o quitar puntos según necesites.
¿Qué diferencia hay entre polygon(), circle(), ellipse() e inset()?
polygon() crea formas de lados rectos con los puntos que definas. circle() y ellipse() recortan círculos u óvalos. inset() recorta un rectángulo hacia adentro desde los bordes, con esquinas redondeadas opcionales.
¿Necesitas algo más que un recorte CSS?
Diseñamos interfaces completas con esta misma atención al detalle.
Conocer diseño UX/UI