Creador CSS Clip-path

Creador CSS Clip-path - Generador Visual de Formas

CSS clip-path es una de las propiedades más potentes pero infrautilizadas en CSS moderno — te permite recortar cualquier elemento HTML en formas geométricas usando polígonos, círculos, elipses o rectángulos inset, con renderizado acelerado por GPU y soporte total para animaciones y transiciones CSS. El problema es que la sintaxis es implacable: una forma de polígono requiere pares de coordenadas escritos a mano, y cualquier errata rompe silenciosamente todo el recorte. Este editor visual te permite arrastrar puntos en una vista previa en vivo, cambiar entre tipos de forma y aplicar 12 formas predefinidas (triángulo, rectángulo, pentágono, hexágono, estrella, flecha, galón, cruz, rombo, etc.). También puedes importar un valor clip-path existente para editarlo visualmente, luego copiar CSS listo para producción que incluye tanto el prefijo -webkit-clip-path como el clip-path sin prefijo, funcionando en Chrome 55+, Firefox 54+, Safari 9.1+ y Edge 79+.

¿Qué es CSS clip-path?

CSS clip-path es una propiedad que crea una región de recorte para definir qué partes de un elemento son visibles. Las partes fuera de la región de recorte se ocultan.

Tipos de forma:

polygon() - Formas personalizadas con múltiples puntos
circle() - Recorte circular
ellipse() - Recorte oval
inset() - Rectangular con esquinas redondeadas opcionales

¿Puedo editar un clip-path existente?

Sí. Pega cualquier valor CSS clip-path existente en el cuadro Importar clip-path y haz clic en Importar — la herramienta detecta el tipo de función, cambia a la forma correspondiente y rellena cada punto o control para que puedas ajustarlo visualmente. Funciona con listas de coordenadas polygon(), circle(R at CX CY), ellipse(RX RY at CX CY) e inset() con abreviatura de 1/2/4 valores y un radio 'round' opcional.

Es la forma más rápida de refactorizar un clip-path heredado de una hoja de estilos o sistema de diseño: en lugar de reescribir cada coordenada a mano, pega, arrastra los puntos y copia el CSS actualizado. El centro 'at ...' es opcional para círculo y elipse y por defecto es 50% 50% cuando se omite.

¿Qué significan closest-side y farthest-side en el radio del círculo?

circle() y ellipse() aceptan radios con palabras clave además de porcentajes. closest-side dimensiona la forma para que su borde toque el lado de la caja más cercano al centro, y farthest-side la extiende al lado más distante. closest-corner y farthest-corner hacen referencia a las esquinas de la caja.

Ejemplo: circle(closest-side at 50% 50%) siempre cabe dentro del elemento sin importar la relación de aspecto. Los porcentajes (como circle(40%)) se resuelven contra un valor de referencia derivado del ancho y alto del elemento, así que un radio en porcentaje puede sobresalir de la caja en elementos muy no cuadrados. Usa palabras clave cuando necesites que el recorte quede contenido al redimensionar. Este editor visual trabaja en porcentajes para edición precisa por arrastre; cambia a radios con palabras clave a mano en tu CSS final cuando necesites contención responsiva.

¿Cómo creo un clip-path de polígono?

El clip-path de polígono usa puntos de coordenadas:

Sintaxis: polygon(x1% y1%, x2% y2%, ...)

Cada punto se define por porcentajes X e Y:
- 0% 0% = esquina superior izquierda
- 100% 0% = esquina superior derecha
- 100% 100% = esquina inferior derecha
- 0% 100% = esquina inferior izquierda
- 50% 0% = centro superior

¿Cómo funcionan círculo y elipse?

Sintaxis de círculo:
circle(radio at centroX centroY)

Ejemplo: circle(50% at 50% 50%)
- Crea un círculo con radio 50%
- Centrado en 50% 50% (medio)

Sintaxis de elipse:
ellipse(radioX radioY at centroX centroY)

Ejemplo: ellipse(50% 30% at 50% 50%)
- Crea una forma oval
- 50% ancho, 30% alto

¿Qué es inset clip-path?

Inset crea un recorte rectangular con esquinas redondeadas opcionales:

Sintaxis: inset(arriba derecha abajo izquierda round radio)

Los valores representan inset desde cada borde:
- inset(10%) - 10% desde todos los lados
- inset(10% 20%) - 10% arriba/abajo, 20% izquierda/derecha

¿Qué navegadores admiten clip-path?

Soporte de navegador para clip-path:

Soporte completo:
- Chrome 55+
- Firefox 54+
- Safari 9.1+ (puede requerir prefijo -webkit-)
- Edge 79+
- Opera 42+

Para compatibilidad con Safari, añade:
-webkit-clip-path: polygon(...);
clip-path: polygon(...);

Nota: clip-path no afecta al diseño del elemento - el elemento sigue ocupando todo su espacio, solo cambia el área visible.

Consejo de rendimiento: clip-path activa aceleración GPU, haciéndolo eficiente para animaciones.

¿Puedo animar clip-path con transiciones CSS?

Sí, pero solo entre formas del mismo tipo con el mismo número de puntos. Animar entre polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) y polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) funciona porque ambos tienen 4 puntos; animar de un polígono de 4 puntos a uno de 6 puntos NO interpola suavemente — el navegador salta al estado final. Para animar entre formas con diferente número de puntos, define la forma más pequeña con puntos adyacentes duplicados (un polígono degenerado) para que ambas formas compartan el mismo recuento de vértices. circle() y ellipse() animan limpiamente a otros círculos y elipses, e inset() anima a otros insets, pero no puedes hacer transición entre funciones de forma diferentes (polygon a circle). Todas las animaciones son aceleradas por GPU y permanecen fluidas a 60fps incluso en móvil.

¿En qué se diferencia clip-path de mask-image, overflow:hidden y SVG clipping?

Cuatro maneras de recortar elementos, cada una con compromisos. clip-path usa formas geométricas (polígonos, círculos) y da bordes nítidos con antialiasing; está acelerado por GPU y se anima bien. mask-image usa el canal alfa de una imagen como máscara, así que admite bordes suaves, degradados y máscaras de bitmap arbitrarias — pero es más pesado de renderizar y menos eficiente para animaciones. overflow:hidden combinado con un elemento hijo es un truco que solo produce recortes rectangulares; útil para navegadores antiguos pero inflexible. SVG <clipPath> es el padre de CSS clip-path y admite trazados más complejos incluyendo curvas bezier, pero requiere SVG inline y rompe el apilamiento z-index. Elige clip-path para formas geométricas y animaciones, mask-image para efectos de borde suave, SVG clipPath para formas bezier complejas que CSS no puede expresar.

¿Por qué mi clip-path no funciona en Safari iOS?

iOS Safari requiere el prefijo -webkit-clip-path además de la propiedad clip-path sin prefijo, incluso en versiones modernas iOS 16+. Dos trampas adicionales: (1) Safari no permite referencias url() a clip paths SVG en archivos externos — el SVG debe estar inline en el mismo documento; (2) Safari ha tenido históricamente bugs con clip-path en elementos que tienen CSS filter o backdrop-filter aplicado, a veces ignorando el clip por completo. Usa la salida CSS de esta herramienta que incluye tanto versiones con prefijo como sin prefijo. Si clip-path sigue fallando en iOS, asegúrate de que tu elemento no esté anidado dentro de un padre con filter, transform-style: preserve-3d o will-change: transform — estos pueden romper el renderizado de clip en WebKit.

¿Cuál es el uso práctico de clip-path en diseños reales?

Patrones de producción comunes: (1) divisores de sección diagonales usando polygon(0 0, 100% 0, 100% 90%, 0 100%) para crear secciones de página inclinadas sin HTML extra; (2) cuadrículas de avatar hexagonal usando un polígono de 6 puntos para layouts de fotos de equipo tipo panal; (3) efectos de revelación animados donde texto o imágenes se descubren desde un círculo que se expande desde un punto de clic; (4) formas de burbuja de mensaje para UIs de chat usando un polígono con una muesca; (5) layouts de página estilo Apple conscientes de notch que recortan alrededor de notches de dispositivo; (6) efectos hover de imagen que se transforman entre dos variantes de forma. Evita clip-path para elementos muy grandes (>4000px de ancho) en dispositivos de gama baja — el coste de rasterización GPU crece con el tamaño del elemento. Para polígonos complejos (>50 puntos), prefiere SVG clipPath que es más eficiente en memoria.

Características principales

• 4 tipos de forma: polígono, círculo, elipse, inset
• Edición visual de puntos arrastrables
• Importar y editar un valor clip-path existente
• La salida incluye el prefijo -webkit- para Safari/iOS
• 12 formas de polígono predefinidas
• Agregar y eliminar puntos de polígono
• Entrada numérica precisa para todos los valores
• Vista previa en vivo
• Controles de radio y posición del círculo
• Elipse con radios X/Y independientes
• Inset con soporte de radio de borde
• Copiar código CSS al portapapeles
• Amigable con dispositivos táctiles
• Procesamiento 100% del lado del cliente
• Soporte de modo oscuro
• Interfaz responsiva