Generador de clip-arcs CSS.
Generador de clip-arcs CSS gratuito en línea, sin necesidad de instalación. Editor visual para personalizar formas de recorte.
Acerca de CSS Clip-Path Generator
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.
Uso de Formas Predefinidas
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.
Entrada de Ruta Personalizada
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.
Constructor de Polígonos
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.
Opciones de Vista Previa
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.
Compatibilidad del Navegador
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.
▶¿Para qué se usa CSS clip-path?
▶¿Cuál es la diferencia entre polygon(), circle(), ellipse() y inset()?
▶¿Cómo creo un polígono irregular?
▶¿Por qué mi clip-path no funciona en algunos navegadores?
▶¿Puedo animar cambios de clip-path?
▶¿Qué significan los porcentajes X e Y en los puntos del polígono?
▶¿Cómo uso datos de ruta SVG con clip-path?
▶¿Hay un límite para el número de puntos del polígono?
Si este herramienta le ha sido útil, considere comprarme un café.
Compra un café para mí.