Generador de clip-arcs CSS.

CSS Clip-Path Generator es una herramienta visual para crear y probar propiedades CSS clip-path. Clip-path te permite recortar elementos en formas básicas (círculo, elipse, polígono) o una ruta SVG. Esta herramienta proporciona una vista previa en tiempo real y generación de código para ayudarte a diseñar formas personalizadas para tus proyectos web.

Haz clic en cualquier botón de forma predefinida en el panel Predefinidos para aplicarla instantáneamente. La herramienta incluye 12 formas integradas: Triángulo, Trapezoide, Paralelogramo, Pentágono, Hexágono, Heptágono, Octágono, Estrella, Círculo, Elipse, Marco Recortado y Recorte Redondeado. La vista previa se actualiza inmediatamente para mostrar cómo la forma recorta el elemento.

Ingresa cualquier valor clip-path válido en el campo de entrada Ruta Personalizada. Soporta todas las funciones clip-path: polygon(), circle(), ellipse(), inset() y path(). La herramienta muestra el código CSS generado con tanto el prefijo estándar como -webkit- para máxima compatibilidad del navegador. Haz clic en el botón Copiar para copiar el código al portapapeles.

El Constructor de Polígonos proporciona una interfaz visual para crear formas de polígono personalizadas. Cada punto se define por coordenadas X e Y (0-100%). Agrega más puntos (mínimo 3) para crear polígonos complejos, o elimina puntos para simplificar. El constructor genera automáticamente sintaxis CSS polygon() válida mientras ajustas las coordenadas.

Personaliza la vista previa ajustando el control deslizante Tamaño (100-400px) y usando el selector de color para cambiar el color de fondo del elemento. Estos ajustes te ayudan a visualizar cómo aparecerá el clip-path con diferentes tamaños y colores de elementos en tu diseño.

CSS clip-path es compatible con todos los navegadores modernos. La herramienta incluye automáticamente -webkit-clip-path para compatibilidad con Safari. Ten en cuenta que clip-path con la función path() tiene soporte limitado en navegadores antiguos. Siempre prueba tus navegadores de destino antes del despliegue en producción.