Mueve los puntos y copia el código. Este generador de clip-path en CSS es un editor visual de polígonos: mueve los controles de la vista previa y el valor de clip-path que aparece debajo se actualizará al instante. Las medidas se expresan en porcentajes para que la forma cambie de tamaño junto con el elemento al que la apliques.
Qué hace la herramienta:
- Arrastre puntos en la vista previa en vivo para remodelar el polígono; haz clic derecho en un punto para eliminarlo
- 18 ajustes preestablecidos para comenzar desde: triángulo, trapezoide, paralelogramo, rombo, pentágono a octágono, estrella, cruz, burbuja de mensaje, flechas, galones, además de círculo, elipse y rectángulo redondeado
- Porcentaje de salida para que un valor funcione en cada tamaño de elemento
- Copie la declaración
clip-path: …;terminada con un solo clic, o Restablecer forma para empezar de nuevo
Los ajustes preestablecidos de círculo, elipse y rectángulo redondeado se copian como valores circle(), ellipse() y inset(). Todo lo que dibujas a mano es un polygon(). No hay modo path() ni cambio de unidad de píxeles; para curvas más allá de lo que un polígono puede aproximar, la ruta SVG más abajo es la que se debe tomar.
Cómo utilizar este generador de clip-path
- Elige un ajuste preestablecido del panel de la derecha o mantenga la forma predeterminada
- Arrastra cualquier punto para moverlo. Haz clic derecho en un punto para eliminarlo y simplificar el contorno.
- Mire el valor en la vista previa. Es la declaración
clip-pathexacta, ya en porcentajes - Haz clic en Copiar y péguelo en la regla de tu imagen, tarjeta o sección
- Pruebe en el elemento real con un par de anchos, ya que los porcentajes siguen el cuadro del elemento, no el de la vista previa.
Un corte de héroe diagonal es lo más común que la gente construye aquí. Cuatro puntos, un Edge en ángulo:
.hero {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}El resto de esta página cubre lo que la propiedad puede hacer más allá de los polígonos, cómo se comportan las coordenadas y los cuadros de referencia, y dónde una forma generada tiende a romperse una vez activa.
¿Qué es un generador de clip-path CSS?
Un generador de clip-path CSS es una herramienta basada en navegador que genera valores de clip-path a través de una interfaz visual en lugar de coordenadas escritas a mano.
Se encuentra encima de la propiedad de clip-path (EN), que proviene del CSS Módulo de enmascaramiento (EN) y oculta todo fuera de una forma elegida.
La propiedad es nativa de CSS (EN), por lo que todo el trabajo del generador es la traducción, convirtiendo los puntos arrastrados en una sintaxis que el navegador ya comprende.
Lo que lo diferencia de un fragmento de código simple es el bucle de retroalimentación: mueves un controlador, la forma se actualiza en la pantalla y la cadena polygon() o circle() correspondiente se actualiza con él.
Sin compilación, sin pasos de vista previa separados, sin adivinar porcentajes.
En resumen:
- Categoría: una herramienta interactiva de edición de formas
- Función: convierte los puntos arrastrados en CSS listos para pegar
¿Qué funciones de forma básicas admite clip-path?
Cinco funciones de forma básicas cubren casi todo lo que un generador puede generar: polygon(), circle(), ellipse(), inset(), y ruta().
Cada uno recibe un tipo diferente de información. Algunos generadores cambian el modo de edición según la función; éste edita polígonos y sirve las otras formas como ajustes preestablecidos.
path() es el extraño, ya que acepta datos de ruta sin procesar SVG (EN).
Así es como un generador puede generar curvas que las matemáticas poligonales simples no pueden producir.
/* the same idea in three functions */
.avatar { clip-path: circle(50% at 50% 50%); }
.card { clip-path: inset(0 0 0 0 round 16px); }
.badge { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }| Función de forma | Entrada | Forma típica |
|---|---|---|
| polygon() | lista de pares de coordenadas x/y | triángulos, estrellas, cortes personalizados |
| circle() | radio y punto central | avatares, insignias |
| ellipse() | dos radios y punto central | cultivos estilo gota |
| inset() | compensaciones de cada Edge | cultivos rectangulares, tarjetas redondeadas |
| path() | SVG cadena de datos de ruta | formas irregulares dibujadas a mano |
La función inset() también acepta esquinas redondeadas, utilizando exactamente el mismo patrón de valor que un generador de radio de borde estándar.
La lista de funciones de forma sigue creciendo. Chrome envió una sexta opción, shape(), en Chrome 135 (EN), seguida de Safari en la versión 18.4.
Se recorta a contornos responsivos, no poligonales, incluidas curvas, sin necesidad de un archivo SVG separado.
Cuadro de referencia y unidades de coordenadas en la clip-path
Las coordenadas de la clip-path vienen en algunas unidades diferentes, y la elección afecta cómo se comporta la forma una vez que la página cambia de tamaño. Este generador solo escribe porcentajes, que es el valor predeterminado correcto para cualquier cosa que deba cambiar de tamaño.
- Valores porcentuales: escala con el elemento, de modo que la forma mantenga sus proporciones a medida que el cuadro cambia de tamaño
- Valores de píxeles: permanecen fijos, útiles para una forma que nunca debe estirarse, como el recorte de una insignia
- Unidades de ventana gráfica: vincula la forma a la ventana del navegador en lugar del elemento
Esa opción relativa a la ventana gráfica es más importante en las secciones con sangrado completo, donde la forma debe seguir la ventana gráfica ventana (EN) en lugar de un elemento principal.
Mientras tanto, las coordenadas basadas en porcentajes son las que hacen que una forma recortada forme parte de un genuino diseño responsivo (EN). Los puntos se mueven proporcionalmente en cada punto de interrupción.
Cada coordenada también se mide con respecto a un cuadro de referencia específico, y el cuadro que elija decide dónde comienza realmente "0%".
| Cuadro de referencia | Medido desde | Uso común |
|---|---|---|
| cuadro de borde | Edge exterior de la frontera | predeterminado para la mayoría de los elementos |
| caja de relleno | Edge interior de la frontera | tarjetas con bordes visibles |
| cuadro de contenido | Edge del área de contenido | elementos recortados con mucho texto |
| cuadro de relleno / cuadro de trazo | SVG cuadro delimitador de objeto | recorte SVG gráficos |
Cambiar el cuadro de referencia sin ajustar las coordenadas es una razón común por la que una forma generada se ve bien en la herramienta pero cambia una vez que está activa.
¿Cómo un generador de clip-path convierte una forma en código CSS?
Arrastra un punto y el generador recalculará la función de forma detrás de escena, en tiempo real.
No hay un botón "generar" separado en la mayoría de las herramientas, porque el código siempre está actualizado.
Métodos de edición comunes:
- Arrastra controladores en una imagen de vista previa en vivo
- Un editor punto por punto con campos de entrada numéricos
- Dibujo a mano alzada para formas irregulares basadas en trazados
Una vez que esté satisfecho con la forma, la herramienta le entrega una de dos salidas.
La mayoría de los generadores utilizan por defecto una declaración de clip-path lista que se pega directamente en una hoja de estilo.
En su lugar, un puñado exporta datos de ruta SVG sin procesar, lo cual es útil si está creando la forma dentro de un documento SVG en lugar de una regla CSS.
¿Cómo se comporta clip-path en animaciones y transiciones?
clip-path anima como cualquier otra propiedad CSS, a través de una regla de transición o una secuencia de animación completa.
Está impulsado por dos mecanismos en particular: transiciones para cambios de estado simples y CSS fotogramas clave (EN) para secuencias de varios pasos.
Puntos coincidentes: una forma con el mismo número de coordenadas en ambos extremos se transforma suavemente.
Puntos no coincidentes: un recuento de puntos diferente entre los dos estados hace que la forma se ajuste en lugar de interpolarse.
Combinar la transición con una curva de relajación cubic-bezier personalizada es una forma común de hacer que una revelación de forma se sienta menos mecánica.
.card {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path 400ms cubic-bezier(.4, 0, .2, 1);
}
.card:hover {
/* same four points, so the shape tweens instead of snapping */
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}¿Qué navegadores admiten clip-path y qué sucede cuando no lo hacen?
La compatibilidad del navegador con clip-path ya no es un riesgo real, y los números lo respaldan.
- Ampliamente disponible desde enero de 2020: la clip-path alcanzó el estado básico en los principales navegadores, según MDN (EN)
- 96% de soporte global: Can I Use (EN) rastrea el soporte de clip-path en aproximadamente el 96% del tráfico del navegador rastreado
- Prefijo eliminado en 2024: WordPress core (EN) eliminó -webkit-clip-path de su CSS después de que el uso de Chrome 24 a 54 cayera al 0.1% y Safari por debajo de 13 cayera al 0.05%
Esa etiqueta de referencia es importante porque indica que es seguro enviar la función sin un polyfill en proyectos normales.
Esto no significa que todas las funciones dentro de clip-path llegaron al mismo tiempo, ya que las nuevas incorporaciones como shape() todavía se están poniendo al día en todos los motores.
En un navegador que ignora la propiedad por completo, normalmente siguen tres cosas:
- El elemento se representa en tamaño y forma completos, sin recortar.
- Nada más en la página se rompe, ya que la clip-path solo afecta la pintura
- Cualquier desplazamiento o animación vinculada a la forma simplemente no se ejecuta
Escribir un fondo simple o una regla de borde antes de la declaración de la clip-path es suficiente como alternativa para la mayoría de los diseños. También ayuda a que las pruebas de compatibilidad entre navegadores (EN) detecten la brecha temprano.
¿Para qué se utiliza un generador de clip-path CSS?
La mayoría de los casos de uso reales se incluyen en un puñado de patrones de diseño repetibles, no en experimentos únicos.
- Cortes de sección diagonal que dividen una página que de otro modo sería rectangular
- Divisores de forma entre un encabezado y el contenido a continuación
- Efectos de revelación al pasar el cursor sobre tarjetas y miniaturas de productos
- Cultivos orgánicos o de manchas para imágenes de retratos e ilustraciones.
Los cortes diagonales aparecen con mayor frecuencia en una sección principal de una página de destino (EN), donde un único Edge en ángulo separa la introducción del siguiente bloque de contenido.
Los recortes triangulares siguen la misma matemática de polígonos que impulsa un generador de triángulos CSS (EN), simplemente aplicado a una foto o al fondo de una tarjeta en lugar de a un cuadro simple.
Nada de esto es una técnica de diseño convencional y los datos lo respaldan. clip-path aparece solo en aproximadamente el 0.06% de todas las cargas de páginas de Chrome rastreadas por los contadores de uso propios de Chrome (EN).
Ese número bajo se ajusta a una herramienta utilizada para dar un acento visual deliberado, no es algo que todos los sitios necesiten.
¿Qué herramienta generadora de clip-path debería utilizar?
Cuatro herramientas cubren casi todos los flujos de trabajo, y la elección correcta depende de si estás empezando desde cero o editando una forma que ya está activa en una página. El generador de esta página se encuentra en la misma ranura que Clippy: controladores de arrastre, salida poligonal, ajustes preestablecidos, nada que instalar.
| Herramienta | Método de edición | Salida | Mejor para |
|---|---|---|---|
| Clippy | arrastrar controladores en una imagen de vista previa | cadena polígono() | formas rápidas y únicas |
| Herramientas de desarrollo de Firefox | edición de puntos en la página de un elemento en vivo | actualizaciones existentes CSS en su lugar | ajustar una forma que ya está en tu hoja de estilo |
| Figma | arrastrar puntos vectoriales en un marco | sin código, exportado manualmente | creación de prototipos antes de escribir cualquier CSS |
| CodePen | código de formato libre con una vista previa en vivo | URL pública compartible | documentar o compartir una forma |
Clippy (EN), creado por el desarrollador Bennett Feely, es la forma más conocida de obtener una cadena poligonal() sin nada instalado.
Editor de ruta de forma de Firefox (EN) funciona de manera diferente. Edita el valor de la clip-path que ya se encuentra en tu panel de Reglas CSS en lugar de generar uno nuevo desde cero.
Chrome no tiene un equivalente nativo integrado en DevTools. La opción más cercana es una extensión de terceros que no se actualiza desde 2015.
Si estás simulando un diseño antes de que exista CSS, cortar una forma en Figma (EN) suele ser más rápido que luchar con coordenadas en una herramienta de navegador.
Dos preguntas reducen rápidamente la elección:
- ¿Necesita la forma una vez o seguirá ajustándola a medida que cambie el diseño?
- ¿La forma ya existe en una página real o estás empezando desde un lienzo en blanco?
¿Cuándo debería utilizar clip-path en lugar de CSS Mask o el elemento SVG clipPath?
Los tres pueden ocultar parte de un elemento, pero solucionan problemas diferentes.
clip-path:
- Ventaja: formas definidas con una sintaxis breve y legible
- Desventaja: no se puede desvanecer ni suavizar un Edge
CSS máscara:
- Ventaja: transparencia basada en gradientes y imágenes, no solo una forma
- Desventaja: mayor rendimiento de la pintura en áreas grandes
SVG clipPath:
- Ventaja: una definición de forma reutilizada en varios elementos
- Desventaja: vive en el marcado en lugar de en la hoja de estilo, es fácil perderle la pista
En esa comparación, los degradados se resuelven con CSS: mask-image acepta la misma sintaxis de degradado que se usa en otras propiedades. Por eso, un generador de degradados CSS (EN) permite obtener el valor; después solo tienes que cambiar el nombre de la propiedad.
El elemento SVG <clipPath> en realidad ha estado estable durante más tiempo que la propiedad CSS creada para hacer referencia a él, Línea de base ampliamente disponible desde julio de 2015 (EN).
path() llegó años después que clip-path, aterrizando en Chrome 88, Firefox 71 y Safari 13.1, según datos de compatibilidad de navegadores rastreados por MDN (EN).
¿Cómo se construye una forma con un generador de clip-path CSS?
El flujo de trabajo apenas cambia de un generador a otro.
- Elige una función de forma inicial, generalmente polígono() para un corte personalizado o círculo() para un recorte simple
- Arrastra puntos en la vista previa hasta que el contorno coincida con lo que desea
- Cambia la unidad de coordenadas a porcentaje si la forma necesita cambiar de tamaño con su contenedor (este generador ya está allí)
- Copia la declaración de clip-path generada en tu hoja de estilo
- Pruebe la forma en algunos anchos de pantalla con media queries (EN), ya que una forma que se ve bien en un ancho puede desviarse en otro
Dos errores explican la mayoría de las quejas de "funcionó en la herramienta pero no en mi sitio".
- Copiar coordenadas de píxeles de una vista previa que utilizaba un tamaño de elemento diferente al de la página real
- Olvidar que los puntos porcentuales se miden con respecto al cuadro de referencia, no a la ventana completa del navegador
¿Cuándo no funciona clip-path?
clip-path falla silenciosamente. Nada arroja un error, la forma simplemente no se comporta como se veía en el generador.
- Los clics desaparecen con el clip: de forma predeterminada, los eventos de puntero no se envían dentro de la región recortada, por lo que un botón parcialmente oculto por una forma deja de recibir clics allí (MDN (EN))
- z-index puede cambiar inesperadamente: cualquier valor de clip-path que no sea ninguno crea un nuevo contexto de apilamiento, de la misma manera que lo hace la opacidad para valores inferiores a 1. Eso puede cambiar silenciosamente la forma en que se superponen los elementos.
- El cambio de tamaño rompe los cálculos: las coordenadas porcentuales están bloqueadas en el cuadro de referencia en el momento del renderizado. Una caja que cambia de tamaño hasta JavaScript en lugar de CSS puede dejar la forma cortada en el lugar equivocado
Nada de esto aparece en la vista previa de un generador, ya que la vista previa es una instantánea única y estática de un tamaño de elemento.
Al probar la forma dentro de la página real, en más de un ancho y con elementos interactivos reales debajo, se detectan los tres antes de enviarlos.
Preguntas frecuentes: Generador de clip-path CSS
¿Cuál es la diferencia entre clip-path y shape-outside?
clip-path oculta partes de un elemento visualmente, mientras que shape-outside solo cambia cómo el texto en línea se ajusta alrededor de un elemento flotante.
Ambos comparten las mismas funciones básicas de forma, pero la shape-outside nunca toca lo que el elemento mismo pinta.
¿Se puede combinar la clip-path con la transformación CSS?
Sí. clip-path y transform se aplican de forma independiente, por lo que escalar, rotar o trasladar un elemento no desactiva su clip.
La forma permanece anclada al cuadro de referencia del elemento, moviéndose y cambiando de tamaño junto con cualquier transformación que se aplique.
¿La clip-path perjudica el rendimiento de la página?
Las formas simples como circle() o polygon() son económicas de renderizar y rara vez causan una desaceleración mensurable.
Las formas complejas de ruta() se recalculan en cada cuadro de animación, por lo que recortar un elemento grande y frecuentemente animado cuesta más que recortar uno pequeño y estático.
¿Cómo se hace que una forma de clip-path responda a través de puntos de interrupción?
Las coordenadas porcentuales se escalan automáticamente, pero pueden distorsionar una forma cuando la relación de aspecto cambia bruscamente entre los puntos de interrupción.
Escribir una regla clip-path separada dentro de una consulta de medios, en lugar de una forma porcentual para cada ancho, mantiene las proporciones intencionales en lugar de accidentales.
¿Se puede aplicar la clip-path a las imágenes de fondo?
Sí, aunque no de forma selectiva. clip-path recorta todo el cuadro del elemento en la etapa de pintura, por lo que cualquier imagen de fondo, color o borde se corta junto con el primer plano.
Para recortar solo el fondo y dejar el texto o los íconos intactos, dale al fondo su propio elemento.
¿Qué debería comprobar primero con un generador de clip-path CSS?
Un generador de ruta de clip CSS se gana la confianza sólo después de que su resultado sobrevive tres comprobaciones. El cuadro de referencia coincide con el elemento activo, las unidades de coordenadas se mantienen en más de un ancho de pantalla y la forma aún recibe clics donde un visitante los espera.
El orden se ve así:
- Haz coincidir primero el cuadro de referencia
- Cambia el tamaño del navegador en segundo lugar, comprobando la desviación porcentual
- Haz clic en la tercera forma para confirmar que no se traga nada importante.
Ejecutar la prueba de clic antes de la prueba de cambio de tamaño ahorra una primera pasada, pero corre el riesgo de obtener una forma que se ve bien y queda mal una vez que cambia el diseño.
Este orden es válido para el panorama de navegadores verificado en septiembre de 2026. Se afloja una vez que las funciones de forma básicas más nuevas cierran la brecha restante entre los motores.
Una vez que una forma pasa las tres comprobaciones, animarla es el siguiente paso lógico. Un generador de animación CSS (EN) dedicado maneja la sincronización de fotogramas clave sin curvas de relajación escritas a mano.