Generador de clip-path CSS

¿Qué es Generador de clip-path CSS?

El generador de clip-path CSS es un editor visual gratuito de la propiedad clip-path, pensado para desarrolladores front-end y diseñadores que quieren recortar elementos en formas no rectangulares. Elige un preset del desplegable: circle() y ellipse() con un radio y un punto central, polygon() con tantos vértices como necesites, inset() con cuatro desplazamientos de borde, o una variante de inset() redondeado con un radio de esquina. Cada parámetro es un porcentaje que se introduce en un campo numérico, y un recuadro de vista previa sobre un fondo de cuadrícula revela la forma resultante en tiempo real. El CSS clip-path completo se genera para que lo copies. Úsalo para enmascarar imágenes, crear separadores diagonales de sección, construir avatares hexagonales o recortar formas de bocadillo sin contar coordenadas a mano.

Cómo usar Generador de clip-path CSS

1. Elige una forma en el desplegable de presets: círculo, elipse, polígono, inset o redondeado.
2. Para círculo o elipse, ajusta el radio (o los radios X/Y) y la posición central X/Y en porcentaje.
3. Para polígono, edita el X e Y de cada vértice en porcentaje; pulsa Añadir punto para sumar más vértices y reordénalos editando los valores.
4. Para inset o redondeado, ajusta los desplazamientos superior, derecho, inferior e izquierdo; el redondeado también lleva un radio de esquina.
5. Observa cómo la vista previa recorta la caja mientras escribes.
6. Copia el CSS clip-path generado y pégalo en tu hoja de estilos.

Ejemplos

Preset círculo, radio 50%, centro 50% 50%

clip-path: circle(50% at 50% 50%);

Preset polígono, puntos (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Preset redondeado, inset 10% en todos los lados, radio de esquina 20%

clip-path: inset(10% 10% 10% 10% round 20%);

Preguntas frecuentes

¿Para qué sirve clip-path?

La propiedad CSS clip-path recorta un elemento a una forma básica, de modo que solo el área dentro de la forma queda visible. Es ideal para avatares circulares, cortes diagonales de sección, rejillas hexagonales, máscaras de imagen y bocadillos, todo sin imágenes ni archivos SVG adicionales.

¿Cómo funciona el preset de polígono?

polygon() dibuja una forma conectando una lista de vértices X/Y en orden. Edita los valores en porcentaje de cada punto y usa Añadir punto para insertar más vértices; el último punto se conecta automáticamente con el primero. Se mantiene un mínimo de tres puntos para que la forma siga siendo válida.

¿Por qué los valores están en porcentaje?

Los porcentajes hacen que el recorte escale con el elemento, así el mismo clip-path funciona a cualquier tamaño. 0% es el borde izquierdo o superior y 100% el derecho o inferior de la caja del elemento.

¿Qué añade el preset redondeado?

El preset redondeado usa inset() con un radio de esquina round, generando un rectángulo recortado hacia dentro por cada lado y con esquinas redondeadas, útil para recortes enmarcados suaves que un border-radius normal no puede combinar con un recorte inset.

¿Se envían mis datos a algún sitio?

No. El generador se ejecuta por completo en tu navegador con JavaScript: tus valores de forma nunca salen de tu dispositivo, así que funciona de forma privada e incluso sin conexión tras cargar la página.