Generador de Clip-Path CSS
Este generador de clip-path CSS te permite diseñar formas clip-path de forma visual en lugar de escribir pares de coordenadas a mano. Arrastra controladores en un lienzo interactivo, observa cómo se actualiza la forma en tiempo real y copia el CSS generado directamente en tu hoja de estilos.
Admite las cuatro funciones de forma de clip-path — polígono, círculo, elipse e inset — y trae 28 plantillas listas para usar. Está pensado para desarrolladores frontend que recortan interfaces no rectangulares, diseñadores web que dan forma a secciones hero y máscaras de imagen, y cualquiera que esté aprendiendo cómo funcionan realmente los valores de clip-path.
Cómo usar el generador de clip-path
Elige un tipo de forma
Selecciona una pestaña — Polígono, Círculo, Elipse o Inset — o abre Predefinidos para partir de una forma lista para usar como una estrella, una flecha o un escudo.
Edita la forma
Arrastra los controladores en el lienzo para remodelarla. En los polígonos, haz clic en un borde para agregar un punto y doble clic en un controlador para eliminarlo. En círculo, elipse e inset, arrastra el centro y el radio o los controladores de borde, o usa los deslizadores para valores exactos.
Usa las ayudas del lienzo
Activa Exterior para atenuar el área recortada, enciende la Cuadrícula para alinear, o cambia el color del lienzo o sube una imagen para previsualizar la forma sobre contenido real.
Copia el CSS
El valor clip-path generado aparece en el panel de salida. Haz clic en Copiar CSS y pégalo en tu hoja de estilos. ¿Ya tienes un valor? Usa Importar para pegar un CSS existente y seguir editándolo de forma visual.
Funciones
Editor visual interactivo
Arrastra controladores en un lienzo 4:3 y el CSS se actualiza al instante, con coordenadas en porcentaje para un posicionamiento preciso.
Cuatro tipos de forma
Crea clip-paths de polígono, círculo, elipse e inset — todas las funciones de forma que admite la propiedad CSS clip-path.
Inset con esquinas redondeadas
Recorta hacia dentro desde cada borde y agrega un radio de borde para redondear las esquinas del rectángulo del inset.
28 plantillas integradas
Parte de triángulos, polígonos regulares, estrellas, flechas y chevrones, bocadillos de mensaje, escudos y variantes de círculo/elipse/inset.
Edición precisa de puntos
Introduce valores X/Y exactos para cada punto del polígono desde la lista de puntos, con precisión del 0,1 % para una salida limpia y legible.
Gestión inteligente de puntos
Haz clic en un borde para insertar un punto entre los vértices más cercanos, y doble clic o Suprimir para eliminar uno — nunca por debajo del mínimo de 3 puntos.
Bloqueo del inset
Activa Bloquear todo para cambiar los cuatro lados del inset a la vez y recortar de forma uniforme desde cada borde.
Historial deshacer / rehacer
Cada cambio se registra en una pila de historial de hasta 50 estados, para que avances y retrocedas con libertad.
Importar CSS existente
Pega un valor de polígono, círculo, elipse o inset y cárgalo en el editor para seguir refinándolo de forma visual.
Fondo personalizado
Cambia el color del lienzo o sube una imagen para previsualizar cómo se ve tu clip-path sobre tu contenido real.
Superposiciones de cuadrícula y exterior
Muestra una cuadrícula de porcentaje de 10×10 para alinear y atenúa el área exterior para ver exactamente qué se recorta.
Atajos de teclado
Deshaz y rehaz con Ctrl+Z / Ctrl+Y, mueve un punto seleccionado con las flechas (1 %, o 5 % con Shift) y elimínalo con Suprimir.
Preguntas frecuentes
¿Qué es clip-path en CSS?
La propiedad CSS clip-path define una región de recorte para un elemento. Solo permanece visible la parte que queda dentro de la forma; todo lo que está fuera se oculta. Se usa habitualmente para diseños no rectangulares, máscaras de imagen y elementos decorativos de la interfaz.
¿Cómo funciona clip-path polygon?
Un valor polygon() es una lista de pares de coordenadas X/Y unidos por bordes rectos, por ejemplo polygon(50% 0%, 100% 100%, 0% 100%) para un triángulo. Cada punto es un porcentaje del ancho y el alto del elemento. En esta herramienta arrastras controladores en lugar de escribir los pares, y el generador escribe el valor del polígono por ti.
¿Cómo agrego o elimino un punto del polígono?
Haz clic cerca de un borde en el lienzo para insertar un punto nuevo entre los dos vértices más cercanos. Para eliminar uno, haz doble clic en su controlador, selecciónalo y pulsa Suprimir o Retroceso, o usa el botón de eliminar de la lista de puntos. Un polígono siempre conserva al menos 3 puntos, por lo que los controles de eliminar se desactivan al llegar al mínimo.
¿Puede clip-path tener esquinas redondeadas?
Sí, con la forma inset. La palabra clave round en inset() agrega un radio de borde al rectángulo recortado — por ejemplo inset(10% round 20%) recorta un 10 % desde cada borde y redondea las esquinas en un 20 %. Ajusta el control Radio de borde en la pestaña Inset para definirlo.
¿Cuál es la diferencia entre círculo y elipse?
Un círculo tiene un único radio y siempre es perfectamente redondo. Una elipse tiene dos radios independientes — uno horizontal (X) y otro vertical (Y) — para que puedas crear formas ovaladas más anchas o más altas que redondas.
¿Puedo importar mi clip-path CSS existente?
Sí. Haz clic en Importar debajo de la salida CSS, pega tu valor (con o sin el prefijo clip-path:) y aplícalo. El analizador admite los cuatro tipos de forma — polígono, círculo, elipse e inset — y carga la forma en el editor para seguir ajustándola.
¿Es compatible clip-path con todos los navegadores?
Las formas básicas que se usan aquí — polígono, círculo, elipse e inset — son compatibles con todas las versiones actuales de Chrome, Firefox, Safari y Edge. Para navegadores muy antiguos, ofrece una alternativa o un polyfill.
¿Se guardan mis formas entre sesiones?
No. Las formas no se conservan entre recargas de página, así que copia tu CSS antes de salir. Puedes guardar el valor tú mismo y recuperarlo en cualquier momento con la función Importar.
¿Se envían mis datos a algún servidor?
No. Toda la edición de formas y la generación de CSS ocurren por completo en tu navegador. No se sube ni se transmite ningún dato, incluida cualquier imagen de fondo que cargues para previsualizar una forma.
Aún no hay comentarios. ¡Sé el primero en comentar!