Generador Clip-Path CSS
Crea siluetas y máscaras visuales interactivas mediante polígonos CSS listos para usar en tus interfaces.
Lienzo Interactivo de Nodos
1
2
3
Arrastra los puntos o haz clic en el lienzo para mover vértices.
Código CSS Generado
css
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%); Formas Predefinidas
Coordenadas de Vértices
1
%
%
2
%
%
3
%
%
Un polígono requiere un mínimo de 3 puntos.
Cómo recortar elementos con CSS clip-path
Guía paso a paso para recortar imágenes, fondos y tarjetas con geometría CSS.
1
1. Elige una forma inicial o agrega puntos
Selecciona uno de los presets geométricos (estrella, flecha, hexágono) o dibuja tu polígono desde cero.
2
2. Arrastra y afina las coordenadas
Desplaza los manejadores en el lienzo o ingresa coordenadas porcentuales precisas.
3
3. Copia el código a tu CSS
Pega las propiedades clip-path y -webkit-clip-path en cualquier selector de tu hoja de estilos.
100% Client-Side
Procesamiento Local Seguro
El cálculo geométrico y el renderizado ocurren exclusivamente en tu navegador de forma instantánea.
Preguntas Frecuentes
Todos los navegadores modernos (Chrome, Firefox, Safari, Edge) soportan clip-path: polygon() de forma nativa. Incluimos el prefijo -webkit-clip-path para compatibilidad máxima con Safari antiguo.
No, los polígonos simples calculados por clip-path son procesados eficientemente por la GPU del navegador.
Sí, siempre y cuando la forma inicial y final tengan exactamente el mismo número de puntos o vértices en la transición CSS.