¿Qué es el Generador de CSS Clip Path?
El Generador de CSS Clip Path es un editor visual para crear formas CSS clip-path. En lugar de escribir valores de clip-path manualmente, puedes arrastrar asas en un lienzo interactivo para diseñar tu forma y copiar el código CSS generado.
¿Por qué usar un editor visual de Clip-Path?
La propiedad CSS clip-path es poderosa pero desafiante de escribir manualmente. Las formas de polígono requieren pares de coordenadas precisos, y incluso cambios pequeños necesitan recalcular múltiples valores. Un editor visual resuelve esto permitiéndote:
Retroalimentación Visual Instantánea
Arrastra las asas y observa cómo la forma se actualiza en tiempo real en el lienzo.
Control de Precisión
Usa la superposición de cuadrícula e inputs numéricos para posicionamiento exacto con precisión del 0.1%.
28 Presets Listos para Usar
Elige entre estrellas, flechas, escudos y más — luego personaliza según tus necesidades.
Importar Código Existente
Pega tu CSS clip-path actual para editarlo visualmente y refinar aún más.
Tipos de Formas Compatibles
Polygon
Circle
Ellipse
Inset
¿Para Quién es Esto?
- Desarrolladores frontend que construyen componentes UI personalizados con formas no rectangulares
- Diseñadores web que crean secciones hero, máscaras de imagen y elementos decorativos
- Estudiantes de CSS que exploran cómo funcionan los valores de clip-path a través de retroalimentación visual
- 1. ¿Qué es el Generador de CSS Clip Path?
- 2. Cómo Usar el Generador de CSS Clip Path
- 3. Características
- 4. Preguntas Frecuentes
- 4.1. ¿Qué es CSS clip-path?
- 4.2. ¿Qué navegadores soportan clip-path?
- 4.3. ¿Cómo añado un punto a un polígono?
- 4.4. ¿Cómo elimino un punto del polígono?
- 4.5. ¿Puedo importar mi CSS clip-path existente?
- 4.6. ¿Cuál es la diferencia entre circle y ellipse?
- 4.7. ¿Qué hace el valor "round" en inset?
- 4.8. ¿Por qué no puedo eliminar un punto del polígono?
- 4.9. ¿Qué tan precisas son las coordenadas?
- 4.10. ¿Puedo usar una imagen de fondo para previsualizar?
- 4.11. ¿Se guardan mis formas entre sesiones?
- 4.12. ¿Se envían mis datos a algún servidor?
Cómo Usar el Generador de CSS Clip Path
Crear una forma clip-path toma solo unos pocos pasos. Sigue esta guía para dominar el editor visual:
Elige un Tipo de Forma
Haz clic en una de las cuatro pestañas de forma en la parte superior del editor:
- Polygon - Para formas personalizadas con múltiples puntos (predeterminado)
- Circle - Para recorte circular
- Ellipse - Para formas ovaladas
- Inset - Para recorte rectangular desde los bordes
O explora la sección Presets para comenzar desde una forma lista como estrellas, flechas o escudos.
Edita la Forma
Cada tipo de forma tiene sus propios controles de edición:
Edición de Polygon
- Arrastra las asas en el lienzo para mover puntos
- Haz clic en un borde para añadir un nuevo punto entre los existentes
- Doble clic en un asa para eliminar un punto (se requieren mínimo 3 puntos)
- Usa la lista de puntos a la izquierda para ingresar valores exactos de X/Y
Edición de Circle & Ellipse
- Arrastra el asa del centro para reposicionar la forma
- Arrastra los asas de radio para redimensionar
- Usa deslizadores para control preciso sobre el radio y la posición del centro
Edición de Inset
- Arrastra los asas de borde para ajustar cuánto se recorta de cada lado
- Activa Bloquear Todo para cambiar los cuatro lados simultáneamente
- Ajusta el Radio de Borde para redondear las esquinas del rectángulo inset
Usa las Opciones del Lienzo
- Exterior - Alterna la visibilidad del área fuera del clip-path (mostrada como una superposición atenuada)
- Cuadrícula - Muestra una superposición de cuadrícula de 10×10 para alineación
- Fondo - Cambia el color del lienzo o carga una imagen para previsualizar tu clip-path en contenido real
Copia el CSS
El código CSS generado aparece en el panel de salida a la derecha. Haz clic en Copiar CSS para copiarlo al portapapeles, luego pégalo en tu hoja de estilos.
Atajos de Teclado
| Atajo | Acción |
|---|---|
| Ctrl + Z / Cmd + Z | Deshacer último cambio |
| Ctrl + Y / Cmd + Shift + Z | Rehacer último cambio deshecho |
| Teclas de flecha | Ajusta el punto del polígono seleccionado en 1% |
| Shift + Teclas de flecha | Ajusta el punto del polígono seleccionado en 5% |
| Delete / Backspace | Elimina el punto del polígono seleccionado |
Características
Editor Visual Interactivo
El lienzo muestra tu forma clip-path en tiempo real. Arrastra las asas para modificar la forma y observa cómo el código CSS se actualiza al instante. El lienzo usa una relación de aspecto de 4:3 con coordenadas basadas en porcentaje para posicionamiento preciso.
Soporte Integral de Formas
Las cuatro funciones de forma CSS clip-path son totalmente compatibles con interfaces de edición dedicadas:
Polygon
Circle
Ellipse
Inset
28 Presets Integrados
Comienza desde cualquiera de los 28 presets de forma organizados en 6 categorías para acelerar tu flujo de trabajo:
Formas Básicas
Triángulo, trapecio, rombo y otras formas geométricas fundamentales.
Polígonos Regulares
Pentágono, hexágono, heptágono y octágono con lados perfectamente simétricos.
Estrellas
Estrellas de 4, 5 y 6 puntas, más formas de cruz y X para elementos decorativos.
Flechas
Flechas direccionales en 4 direcciones (arriba, abajo, izquierda, derecha) más variaciones de chevron.
Formas Complejas
Burbuja de mensaje, bisel, rabbet, escudo y otros diseños geométricos avanzados.
Variaciones de Circle/Ellipse/Inset
Formas circulares, ovaladas e inset preconfiguradas con configuraciones comunes.
Edición Precisa de Puntos
Para formas de polígono, cada punto puede editarse numéricamente a través del panel de lista de puntos. Cada punto muestra sus coordenadas X e Y con precisión del 0.1%. Selecciona un punto haciendo clic en su fila, luego ajusta con los campos de entrada o teclas de flecha.
Gestión Inteligente de Puntos
Haz Clic en Bordes
- Haz clic en cualquier lugar cerca de un borde del polígono
- Nuevo punto insertado entre los vértices más cercanos
- Debe estar dentro de aproximadamente el 5% del borde para registrarse
Múltiples Métodos
- Doble clic en el asa del lienzo
- Selecciona el punto y presiona Suprimir/Retroceso
- Haz clic en el botón eliminar (×) en la lista de puntos
- Se requieren mínimo 3 puntos
Característica de Bloqueo de Inset
Cuando trabajes con la forma inset, activa "Bloquear Todo" para cambiar los cuatro lados simultáneamente. Esto es útil cuando deseas recorte uniforme desde todos los bordes. El deslizador de border-radius añade esquinas redondeadas al rectángulo inset.
/* Uniform 10% inset with 20% corner radius */
clip-path: inset(10% round 20%);Historial de Deshacer/Rehacer
Cada cambio de forma se registra en una pila de historial (hasta 50 estados). Usa los botones deshacer/rehacer o atajos de teclado para navegar por tu historial de edición sin perder tu trabajo.
Importación de CSS
¿Ya tienes un valor clip-path? Haz clic en "Importar" y pega tu código CSS. La herramienta analiza valores de polygon, circle, ellipse e inset y los carga en el editor visual para edición adicional.
clip-path: — solo pega el valor y haz clic en Aplicar.Ayudas del Lienzo
Dos opciones de superposición te ayudan a trabajar más efectivamente:
Superposición del Área Exterior
Una superposición atenuada que muestra la región fuera de tu clip-path, dejando claro qué será visible y qué será recortado.
Cuadrícula de 10×10
Una cuadrícula basada en porcentaje para alineación precisa y simetría al posicionar puntos.
Fondos Personalizados
Previsualiza tu clip-path en diferentes fondos cambiando el color del lienzo o cargando una imagen. Esto ayuda a visualizar cómo se verá la forma en tu contenido real antes de implementarla en tu diseño.
- Selector de color sólido para fondos simples
- Carga de imagen para previsualización de contenido realista
- Cambio instantáneo de fondo sin perder tu forma
Preguntas Frecuentes
¿Qué es CSS clip-path?
La propiedad CSS clip-path define una región de recorte para un elemento. Solo la porción dentro de la forma de recorte es visible; todo lo demás está oculto. Se usa comúnmente para crear diseños no rectangulares, máscaras de imagen y elementos decorativos de UI.
¿Qué navegadores soportan clip-path?
La propiedad clip-path con formas básicas (polygon, circle, ellipse, inset) es compatible con todos los navegadores modernos incluyendo Chrome, Firefox, Safari y Edge. Para navegadores más antiguos, considera proporcionar un fallback o usar un polyfill.
¿Cómo añado un punto a un polígono?
Haz clic en cualquier lugar cerca de un borde del polígono en el lienzo. Un nuevo punto será insertado entre los dos puntos existentes más cercanos. El clic debe estar dentro de aproximadamente el 5% de un borde para registrarse.
¿Cómo elimino un punto del polígono?
Tienes tres opciones:
- Doble clic en el asa del lienzo
- Selecciona el punto y presiona Delete o Backspace
- Haz clic en el botón eliminar (×) en la lista de puntos
¿Puedo importar mi CSS clip-path existente?
Sí. Haz clic en el botón "Importar" debajo de la salida CSS, pega tu valor clip-path (con o sin el prefijo clip-path:), y haz clic en "Aplicar". La herramienta soporta los cuatro tipos de forma: polygon, circle, ellipse e inset.
¿Cuál es la diferencia entre circle y ellipse?
Radio Único
- Un valor de radio
- Siempre perfectamente redondo
- Ancho y alto iguales
Dos Radios Independientes
- Radios X e Y separados
- Crea formas ovaladas
- Puede ser más ancho o más alto
¿Qué hace el valor "round" en inset?
El parámetro "round" en inset() añade border-radius al rectángulo recortado. Por ejemplo:
/* 10% inset from all edges with 20% corner radius */
clip-path: inset(10% round 20%);¿Por qué no puedo eliminar un punto del polígono?
Un polígono requiere al menos 3 puntos para ser una forma válida. Si solo tienes 3 puntos restantes, los controles de eliminación estarán deshabilitados para evitar crear un polígono inválido.
¿Qué tan precisas son las coordenadas?
Todas las coordenadas usan valores de porcentaje con precisión del 0.1% (un decimal). Esto proporciona suficiente precisión para la mayoría de casos de uso mientras mantiene la salida CSS limpia y legible.
¿Puedo usar una imagen de fondo para previsualizar?
Sí. Haz clic en el botón de carga junto al selector de color en el área de configuración del lienzo. Selecciona un archivo de imagen y se mostrará como fondo del lienzo, permitiéndote previsualizar cómo se verá tu forma clip-path en contenido real.
¿Se guardan mis formas entre sesiones?
No, las formas no se persisten entre cargas de página. Asegúrate de copiar tu código CSS antes de salir de la página. También puedes guardar tus valores clip-path externamente e importarlos más tarde usando la función Importar.
¿Se envían mis datos a algún servidor?
No. Toda la edición de formas y generación de CSS ocurre completamente en tu navegador. No se carga ni transmite ningún dato a ningún servidor, incluyendo ninguna imagen de fondo que cargues.
Aún no hay comentarios. ¡Sé el primero en comentar!