Generador CSS Clip-Path

Cómo usar

1. Elige un tipo de forma: polígono, círculo, elipse o inset (rectángulo con esquinas redondeadas opcionales).
2. Arrastra los puntos de control: mueve los tiradores de la forma sobre la vista previa para personalizar con precisión la zona de máscara.
3. Copia el CSS: el valor de la propiedad clip-path generada está listo para pegarse en tu hoja de estilo.

¿Por qué usar el generador CSS clip-path?

CSS clip-path crea formas no rectangulares enmascarando todo lo que queda fuera de una zona definida. Se usa para separadores de secciones en diagonal, recortes de imágenes hexagonales, formas de botón personalizadas, efectos de hover creativos y revelados de imágenes enmascaradas. Escribir a mano las coordenadas de un polígono clip-path implica calcular los porcentajes de cada vértice, tedioso y difícil de visualizar. Este generador interactivo te permite arrastrar puntos visualmente y obtener los valores CSS exactos al instante.

Funcionalidades

• Editor de polígono: añade, mueve y elimina vértices para crear cualquier forma.
• Preajustes integrados: diagonal, chevron, hexágono, estrella, triángulo y otras formas habituales.
• Modos círculo y elipse: controles visuales para una máscara circular o elíptica.
• Modo inset: crea máscaras rectangulares con un border-radius individual para cada esquina.
• Vista previa de la zona enmascarada: ve la parte enmascarada resaltada para saber exactamente lo que se ocultará.

Preguntas frecuentes

¿clip-path afecta a las zonas clicables?

Sí. Por defecto, los eventos de puntero solo se registran dentro de la zona de máscara, la zona enmascarada es invisible y no clicable. Para que el elemento sea totalmente clicable aunque esté enmascarado visualmente, usa pointer-events: all en el elemento o superpón una capa transparente.

¿Puedo animar clip-path?

Sí, clip-path puede ser objeto de transiciones y animaciones CSS. Anima entre dos polígonos con el mismo número de puntos para un efecto de morfismo fluido. Las formas con números de puntos distintos se animarán por saltos en lugar de por interpolación.

¿clip-path está admitido por todos los navegadores?

clip-path está admitido por todos los navegadores modernos. Para formas SVG mediante la sintaxis url(#id), el soporte es aún más amplio. Los valores básicos polygon, circle, ellipse e inset funcionan universalmente en Chrome, Firefox, Safari y Edge.

Lo que CSS clip-path realmente hace

La propiedad CSS clip-path enmascara un elemento a una forma elegida: todo dentro de la forma es visible, todo fuera se vuelve transparente. La caja de diseño del elemento no cambia (sigue ocupando el mismo rectángulo para fines de colapso de margen, flujo y posicionamiento de hermanos), pero solo los píxeles dentro de la región de recorte se dibujan. Esto hace que clip-path sea diferente del recorte (que cambia la imagen permanentemente) y diferente del posicionamiento (que mueve las cosas): clip-path es una máscara aplicada al momento de la visualización, justo antes de que los píxeles lleguen a la pantalla.

Hay cuatro funciones de forma básicas: polygon() (una lista de vértices como coordenadas de porcentaje o píxel), circle() (radio más un centro), ellipse() (dos radios más un centro) e inset() (un rectángulo medido desde cada borde, opcionalmente con esquinas redondeadas). Para formas demasiado complejas para estas cuatro (curvas irregulares, estrellas con sangrías cóncavas, contornos caligráficos), clip-path también acepta una ruta SVG vía path() o una referencia a un elemento SVG <clipPath> vía url(#id). El navegador dibuja el elemento, luego lo compone a través de la máscara alfa definida por tu forma.

clip-path importa para el diseño web moderno porque permite formas que habrían requerido editores de imágenes hace una década. Un divisor de sección diagonal, un recorte de imagen hexagonal, una pancarta tipo chevron, una foto en forma de estrella: ahora todo es posible en CSS puro, escalable a cualquier tamaño, animable al hover y accesible porque el elemento subyacente sigue siendo HTML, no una imagen rasterizada. El compromiso es la verbosidad: escribir polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) a mano para un diamante simple es factible, pero una estrella de 12 vértices o un recorte de logo personalizado es impráctico sin un editor visual. Ahí es donde encaja este generador.

Cómo funciona esta herramienta tras bambalinas

La vista previa es un div con tu clip-path elegido aplicado como CSS en línea, actualizado en cada arrastre de un mango de control. Los mangos son círculos posicionados absolutamente superpuestos en la parte superior de la vista previa en las coordenadas de porcentaje de cada vértice. Cuando arrastras un mango, JavaScript captura el evento mousemove (o touchmove), convierte la posición de píxeles en un porcentaje del área de vista previa, actualiza ese vértice en el polígono en memoria y vuelve a aplicar la cadena clip-path. La representación en tiempo real significa que ves la forma cambiar mientras arrastras, no después.

El CSS generado se construye uniendo los vértices en una cadena de polígono: polygon(x1% y1%, x2% y2%, ...) para el modo polígono, o circle(r% at cx% cy%), ellipse(rx% ry% at cx% cy%), inset(top right bottom left round radius) para los tipos de forma más simples. Se usan valores de porcentaje en lugar de píxeles porque los porcentajes escalan automáticamente con el elemento: un polígono que se ve correcto a 300x200 también se ve correcto a 600x400 sin cambios en el CSS. El cuadro de código se actualiza en cada interacción, y el botón Copiar CSS escribe el valor actual en tu portapapeles.

Nada sale de tu navegador. La vista previa, los cálculos de forma, la generación de CSS y la copia al portapapeles son todos JavaScript del lado del cliente. No se hace ninguna solicitud de red; no se sube ninguna imagen; ningún análisis sobre tus elecciones de forma. La herramienta no tiene backend más allá del HTML estático y JavaScript servidos una vez en la primera carga. Abre la pestaña de red del navegador durante el uso y verás cero solicitudes después de la carga inicial de la página. El CSS que generas es tuyo para pegar en cualquier hoja de estilo.

Breve historia del recorte CSS

• SVG clipPath, 2001.La especificación SVG 1.0 (Recomendación W3C, septiembre de 2001) introduce <clipPath>, permitiendo que cualquier elemento SVG sea enmascarado por otra forma. El recorte SVG maneja rutas complejas pero requiere marcado SVG en línea, limitando la reutilización en páginas HTML simples sin fluidez en SVG.
• Propiedad CSS clip, 1998 a 2010s.La propiedad CSS clip original (especificación CSS 2, 1998) solo soportaba rect(), un recorte rectangular de cuatro valores en elementos posicionados absolutamente. Limitada y obsoleta para 2014, pero todavía vista en patrones CSS heredados de «solo lector de pantalla» donde el contenido visible se recorta a 1x1 píxel para accesibilidad.
• Módulo CSS Masking Nivel 1, 2014.El W3C publica la especificación CSS Masking Module Nivel 1 (abril de 2014), introduciendo la propiedad clip-path moderna con soporte para polygon, circle, ellipse, inset y SVG-path. Chrome 24 (enero de 2013) y Safari 7 (junio de 2013) lanzan las formas básicas antes de la especificación formal; Firefox sigue en la versión 54 (junio de 2017).
• Ola de diseño web brutalista Adobe, 2015 a 2017.Las secciones héroe con cortes diagonales, divisores de pancarta inclinados y cuadrículas de fotos de equipo hexagonales se convierten en una tendencia de diseño, impulsada por herramientas como Webflow y artículos de diseño en CSS-Tricks. Los portafolios estilo Awwwards destacan los trucos de clip-path, y la propiedad pasa de «curiosidad CSS oscura» a «técnica moderna esperada».
• Internet Explorer muere, 2022.Microsoft retira Internet Explorer el 15 de junio de 2022, poniendo fin a la última barrera significativa de navegador para las funciones CSS modernas, incluyendo clip-path. Para 2023, «¿soporta clip-path?» deja de ser una preocupación seria de navegador cruzado, y la propiedad se convierte en una herramienta predeterminada en el diseño solo con CSS.
• Función CSS shape(), 2024 y más allá.El Módulo CSS Shapes continúa evolucionando con propuestas como shape() (una alternativa más flexible a path() usando sintaxis amigable con CSS en lugar de cadenas de ruta SVG), permitiendo formas complejas sin el cambio de contexto SVG. El soporte del navegador se está implementando durante 2025 y 2026.

Flujos del mundo real

• Cortes diagonales de sección héroe.El patrón «héroe trapezoidal» donde el borde inferior de una sección héroe está angulado diagonalmente en lugar de horizontal es uno de los usos más populares de clip-path. Un simple polygon(0 0, 100% 0, 100% 90%, 0 100%) crea una inclinación del 10% de abajo a la izquierda a arriba a la derecha. Agrega una segunda sección debajo con la inclinación inversa y obtienes un diseño «papel rasgado» o «ángulos apilados» que se siente deliberado sin necesitar imágenes.
• Cuadrículas de avatares hexagonales.Las páginas de equipo, listas de colaboradores o plantillas deportivas a menudo usan recortes de fotos hexagonales como una alternativa más dinámica a los avatares redondos. Un polígono de seis vértices clip-path crea el hexágono; CSS grid organiza el diseño de panal escalonado. Comparado con recortar en Photoshop, las fotos permanecen originales y sin modificar: cambia la orientación del hex o cambia a círculos con una sola edición de CSS.
• Efectos de revelación de imagen al hover.Animar clip-path al hover crea «revelaciones de imagen» donde una porción recortada se expande suavemente. Patrones comunes: una imagen comienza como un pequeño círculo y se expande a cobertura completa al hover, o un polígono comienza como una barra delgada y crece a un rectángulo completo. La transición CSS en clip-path interpola entre dos polígonos con el mismo número de puntos suavemente, produciendo animaciones a 60fps sin JavaScript.
• Formas de botones personalizadas.La UI de juegos, las interfaces futuristas y los portafolios creativos a menudo usan botones no rectangulares (formas de flecha, hexágonos, paralelogramos). clip-path enmascara un elemento de botón estándar a la forma elegida, manteniendo el botón subyacente accesible (todavía enfocable, todavía clicable por teclado, todavía anunciable por lectores de pantalla) mientras presenta un visual personalizado.
• Divisores de sección decorativos.Los divisores de onda, los divisores de chevron y los divisores de «página rasgada» entre secciones de página solían requerir imágenes SVG de fondo o imágenes por sección. clip-path los produce en CSS puro usando ya sea un inset con esquinas redondeadas o un polígono siguiendo la onda deseada. Los divisores se escalan y responden automáticamente a los cambios de diseño.
• Galerías de fotos creativas.Los diseños de galería de fotos que usan miniaturas rectangulares uniformes se sienten genéricos; recortar cada miniatura a una forma de polígono ligeramente diferente produce una sensación de collage hecho a mano sin enmascarar manualmente cada imagen. Un pequeño conjunto de 3 a 5 variantes de polígono ciclado a través de la cuadrícula crea un ritmo visual mientras se mantiene el rendimiento (la misma forma simplemente se aplica por transformación a diferentes fuentes de imagen).

Trampas comunes y lo que significan

• clip-path no cambia el diseño.Una sorpresa común: recortar un elemento a una forma más pequeña no reduce el espacio que ocupa en el flujo del documento. El elemento aún ocupa su caja de diseño completa; clip-path solo cambia lo que se dibuja. Para obtener un elemento que físicamente ocupe menos espacio, también necesitas redimensionarlo. Si quieres que el contenido recortado realmente se recorte, usa overflow: hidden en un envoltorio, o usa CSS mask con una caja de diseño más pequeña.
• El desajuste de la relación de aspecto rompe las coordenadas porcentuales.Las coordenadas del polígono expresadas como porcentajes se escalan uniformemente con el elemento. Una forma de diamante polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) permanece un diamante en cualquier tamaño, pero se convierte en un rombo más ancho o más alto si la relación de aspecto del elemento cambia. Para formas que necesitan permanecer visualmente consistentes entre relaciones de aspecto, usa valores de píxel o cálculos min(50vw, 50vh), o restringe la relación de aspecto del elemento con la propiedad CSS aspect-ratio.
• Las regiones recortadas no son clicables.Los eventos de puntero solo se registran donde el elemento es visible después del recorte. Un botón recortado a un triángulo solo es clicable en el triángulo, no en el espacio rectangular invisible que ocupa. Esto generalmente es deseado (sin clics accidentales en espacio vacío), pero puede ser confuso cuando múltiples botones recortados se superponen o cuando el contenido interactivo se extiende visualmente fuera de la región de recorte.
• Animar muchos elementos recortados es costoso.clip-path desencadena la composición en cada cuadro de animación, lo que puede reducir las tasas de cuadros si se aplica a muchos elementos simultáneamente o en elementos grandes (secciones héroe de pantalla completa). Para animaciones a 60fps, limita el número de elementos recortados que se animan simultáneamente, prefiere formas más simples (polígonos de 4 a 6 vértices sobre 20 vértices), y considera usar CSS will-change: clip-path en elementos que planeas animar para indicar al navegador que los acelere con GPU.
• Los polígonos necesitan recuentos de vértices coincidentes para transformarse.Animar clip-path entre dos formas de polígono funciona solo si ambos polígonos tienen el mismo número de vértices. Pasar de un triángulo (3 puntos) a un cuadrado (4 puntos) salta instantáneamente en lugar de transformarse suavemente. Para transformaciones suaves entre formas con diferente complejidad visual, define ambos polígonos con el mismo número de puntos, colocando los extras en coordenadas que «esconden» en una de las formas (por ejemplo, dos puntos uno encima del otro).
• Safari requiere el prefijo -webkit- para la sintaxis de ruta SVG.Las formas básicas (polygon, circle, ellipse, inset) funcionan sin prefijo en todos los navegadores modernos. Pero Safari aún requiere el prefijo -webkit-clip-path al usar la función path() o referenciar SVG clipPaths url(#id). Para compatibilidad entre navegadores, declara tanto -webkit-clip-path como clip-path con el mismo valor para el recorte basado en SVG-path. Los auto-prefijadores (Autoprefixer, PostCSS) manejan esto automáticamente en configuraciones de compilación modernas.

Privacidad: todo se ejecuta en tu navegador

Las herramientas generadoras CSS tradicionalmente caen en dos campos: páginas HTML simples con JavaScript del lado del cliente (privadas, rápidas, sin necesidad de cuenta) y editores completos con proyectos guardados en la nube (colaborativos, pero cada edición de forma se registra en el servidor de alguien más). Esta herramienta está firmemente en el primer campo. Las coordenadas del polígono que arrastras, los colores que eliges, el CSS que copias: todo permanece en tu sesión del navegador, nunca enviado a ninguna parte. Refresca la página y el estado desaparece a menos que hayas copiado el CSS primero.

La implicación de privacidad importa principalmente para el trabajo propietario. Una agencia de diseño prototipando una forma de botón personalizada para un rediseño de marca confidencial, un desarrollador independiente trabajando en una UI de juego no anunciada, un equipo empresarial diseñando diseños para un producto aún bajo NDA: cualquier contexto donde la forma en sí o su historial de iteración podría filtrar información sobre el trabajo en curso. Con esta herramienta, ninguno de esos riesgos existe porque nada se captura. Abre la pestaña de Red del navegador mientras arrastras los mangos y verás cero solicitudes salientes.

Cuándo otra herramienta es la opción correcta

• Editores SVG para rutas complejas.Para curvas irregulares, formas caligráficas o cualquier cosa más allá de las funciones de forma básicas, dibujar la forma en Figma, Inkscape o Adobe Illustrator y exportar como una ruta SVG es más práctico que codificar a mano las coordenadas de clip-path. Luego usa clip-path: path('M...') o referencia el SVG por ID. Los editores SVG proporcionan mangos bezier y precisión; los generadores de clip-path no.
• CSS mask para mezcla alfa y degradados.clip-path produce un alfa binario (totalmente visible o totalmente recortado). Para formas con bordes suaves (desvanecimientos de degradado, curvas anti-aliasadas, transparencia parcial), CSS mask o mask-image maneja degradados alfa completos. mask soporta una imagen de máscara (cualquier PNG, SVG o degradado) donde los píxeles negros ocultan y los píxeles blancos muestran, con grises dando opacidad parcial. clip-path no puede hacer eso.
• Procesamiento de imágenes para recortes permanentes.Si quieres que el archivo de imagen final mismo sea recortado a una forma (tamaño de archivo más pequeño, sin sobrecarga de clip-path, sin riesgo de respaldo sin recorte), haz el recorte en un editor de imágenes o en nuestra herramienta Image Compressor. clip-path es para enmascarado en tiempo de visualización en elementos HTML; si el objetivo es un activo de imagen estático, recorta el archivo directamente.
• Figma o Sketch para maquetas de diseño.Mientras prototipas un diseño, las herramientas vectoriales de Figma manejan la exploración de formas complejas más rápido que arrastrar los mangos de clip-path. Usa la herramienta de diseño para encontrar la forma que quieres, luego traduce la forma final en CSS clip-path para producción. La herramienta de diseño también maneja mejor las iteraciones, el historial de deshacer y los comentarios del equipo que un generador CSS en tiempo real.

Más preguntas frecuentes

¿Puedo usar porcentajes o píxeles para las coordenadas de vértice?

Ambos funcionan. Los porcentajes se escalan con la caja del elemento, por lo que un polígono definido en porcentajes mantiene su forma proporcional cuando el elemento cambia de tamaño. Los píxeles son absolutos, por lo que un polígono con coordenadas en píxeles mantiene el mismo tamaño independientemente del elemento. Usa porcentajes para formas que deben cambiar de tamaño con el diseño (la mayoría de los casos) y píxeles para formas que necesitan posiciones de píxeles exactas (por ejemplo, alinear a un elemento de diseño específico). También puedes mezclar: polygon(50% 10px, 100% 50%, ...) es válido.

¿Afectará clip-path al SEO o a los lectores de pantalla?

No. clip-path es una propiedad puramente visual. El HTML subyacente es totalmente accesible: el texto dentro de un elemento recortado todavía es indexado por motores de búsqueda, todavía es anunciado por lectores de pantalla, todavía es seleccionable por navegación de teclado. Usa clip-path para estilo visual; no lo uses como forma de ocultar contenido semánticamente (eso requiere display: none o atributos aria-hidden). El contenido visualmente recortado permanece presente en el árbol de accesibilidad.

¿Cómo hago un clip-path responsive?

Usa porcentajes en lugar de píxeles, y verifica el resultado en diferentes puntos de quiebre. Para formas que necesitan diferentes proporciones en móvil versus escritorio, usa consultas de medios CSS para intercambiar el valor clip-path: declara un clip-path diferente dentro de @media (max-width: 768px) para la forma móvil. Para necesidades responsivas complejas (por ejemplo, un polígono que se convierte en círculo en móvil), considera usar JavaScript para recalcular el clip-path basado en el tamaño de la ventana, aunque los enfoques puros de CSS manejan la mayoría de los casos.

¿Se puede aplicar clip-path a videos e iframes?

Sí. clip-path funciona en cualquier elemento HTML, incluyendo <video> e <iframe>. La máscara se aplica a nivel del elemento, por lo que un video recortado a un hexágono se reproduce dentro de ese hexágono. Los controles de video (cuando se muestran) también se recortan, lo que puede ocultar inadvertidamente los botones de reproducción/pausa; envuelve el video en un elemento contenedor si necesitas que los controles sean visibles fuera del área recortada.

¿Cuál es el número máximo de vértices de polígono?

No hay un límite formal especificado por el estándar CSS. Prácticamente, los navegadores manejan polígonos con cientos de vértices sin errores de renderizado, pero el rendimiento se degrada con el número de vértices, especialmente para clip-paths animados. Apunta a 3 a 12 vértices para la mayoría de formas decorativas; si necesitas más complejidad, cambia a un path() SVG para una autoría más limpia y características de rendimiento similares. Más allá de 50 vértices, clip-path se vuelve más difícil de mantener a mano y un flujo de trabajo con editor SVG tiene más sentido.

¿Puedo recortar texto en lugar de solo imágenes y cajas?

Sí. clip-path también funciona en elementos de texto, enmascarándolos como cualquier otro elemento. El efecto visual es «texto asomándose a través de una forma». Para efectos de forma de texto más sofisticados (por ejemplo, usando un contorno de texto como máscara de recorte para una imagen), combina clip-path con background-clip: text, que usa la forma del texto misma como región de recorte para el fondo del elemento. Patrón común: texto grande con un fondo de degradado visible solo dentro de las formas del texto.