Generador de Clip Path CSS

Crea formas clip-path visualmente. Elige una forma preajustada o arrastra puntos para armar un polígono personalizado, previsualiza en vivo y copia el CSS.

Arrastra cualquier punto de la forma para modificarla.

.clipped { clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); }

Deja de escribir coordenadas de polígonos a mano

Las formas con clip-path parecen sencillas una vez terminadas, pero escribir los puntos del polígono a mano significa adivinar porcentajes y recargar la página una y otra vez. Esta herramienta convierte esa prueba y error en algo visual: elige una forma inicial, mueve los puntos hasta que el contorno sea el que necesitas, y el CSS se actualiza mientras arrastras.

¿Por qué usar este generador?

15 formas listas para usar

Empieza con círculos, estrellas, flechas, globos de chat y más, sin escribir coordenadas desde cero.

Puntos que se arrastran

Toma cualquier punto de la vista previa y muévelo. El valor de clip-path se actualiza en vivo mientras arrastras.

Varios fondos de vista previa

Cambia entre fondo claro, oscuro y degradado para ver cómo se ven los bordes sobre contenido real.

CSS limpio y listo para copiar

El resultado es una única declaración clip-path, formateada y lista para pegar en tu hoja de estilos.

Cómo funciona este Generador de Clip Path CSS

Esta herramienta crea un valor de clip-path igual que dibujarías una forma en papel: colocando puntos y ajustándolos hasta que el contorno se vea bien. Elige un preajuste en la cuadrícula de formas, como un hexágono, una estrella o un globo de chat, y la vista previa recorta al instante la caja de ejemplo con ese contorno usando la propiedad CSS clip-path. Por debajo, cada preajuste se guarda como una lista de coordenadas en porcentajes, así que la forma se escala correctamente sin importar cuán grande o pequeño sea el elemento final.

Cada forma de polígono te permite arrastrar cualquier punto directamente en la vista previa. Cada arrastre recalcula la posición del punto como un porcentaje del ancho y alto de la caja, y luego reconstruye la función polygon() con las nuevas coordenadas. Como clip-path solo oculta partes de un elemento en lugar de cambiar su tamaño, el fondo permanece en su sitio mientras el área visible cambia de forma, por eso la vista previa te deja cambiar entre fondo claro, oscuro y degradado para comprobar cómo se ven los bordes y el contraste sobre contenido real.

El CSS generado es una única declaración que puedes pegar en cualquier elemento con ancho y alto definidos. Los navegadores modernos renderizan clip-path de forma nativa, así que no hace falta JavaScript en tu sitio, solo la regla copiada. Todo ocurre en tu navegador con cálculos simples; nada de lo que diseñes aquí se sube ni se guarda.

Cómo usar este Generador de Clip Path CSS

1

Elige una forma

Selecciona un preajuste como círculo, hexágono, estrella o flecha, o parte de un polígono personalizado.

2

Arrastra los puntos

Ajusta la forma arrastrando sus puntos directamente sobre la vista previa.

3

Copia el CSS

Toma la regla clip-path terminada y pégala en tu hoja de estilos.

Preguntas Frecuentes

¿Cuál es la diferencia entre clip-path y la antigua propiedad mask-image?
clip-path muestra u oculta partes de un elemento usando una forma de bordes definidos, como un polígono, círculo o elipse. mask-image puede usar un degradado o el canal alfa de una imagen para desvanecer zonas, por lo que admite bordes suaves y degradados de transparencia que clip-path no puede producir. Para un recorte geométrico nítido como las formas de esta herramienta, clip-path es la opción más simple y con mejor compatibilidad.
¿Por qué mi clip-path no tiene ningún efecto en el elemento?
La causa más común es que el elemento no tiene ancho y alto definidos, así que no hay nada visible que la forma pueda revelar más allá del tamaño natural del contenido. clip-path tampoco hace nada en elementos en línea por defecto, así que primero cambia el elemento a block, inline-block o flex. Revisa también si hay un error en la sintaxis de polygon(), ya que un signo de porcentaje o una coma faltante rompe el valor en silencio en la mayoría de los navegadores.
¿Puedo usar clip-path en una imagen de fondo en vez de una etiqueta img real?
Sí. clip-path funciona en cualquier elemento, así que puedes aplicarlo a un div con background-image, background-color o degradado, no solo a un elemento img. De hecho, esa es la opción más segura para diseños responsivos, ya que un img recortado puede verse distorsionado si su relación de aspecto no coincide con el contenedor.
¿Puedo animar o hacer una transición entre dos formas de clip-path?
Sí, pero solo de forma suave si ambas formas usan la misma función de clip-path y, en el caso de polygon(), el mismo número de puntos en el mismo orden. Pasar de un hexágono de 6 puntos a una estrella de 10 puntos saltará en vez de transformarse suavemente, así que añade puntos duplicados a la forma más simple hasta que ambos polígonos tengan el mismo número.
¿clip-path afecta el área en la que realmente se puede hacer clic en un elemento?
En la mayoría de los navegadores modernos, sí. Los clics fuera de la forma visible recortada pasan a lo que esté detrás del elemento, y los clics dentro de la forma sí se registran en él. Esto es diferente de simplemente ocultar el desbordamiento, donde toda la caja rectangular sigue siendo clicable incluso en las partes ocultas.
¿Qué navegadores admiten la propiedad CSS clip-path?
Todas las versiones actuales de Chrome, Firefox, Safari y Edge admiten clip-path con los valores polygon(), circle(), ellipse() e inset(). La compatibilidad es sólida desde alrededor de 2017, así que el único riesgo real son versiones de navegador muy antiguas, algo poco común en el tráfico actual.
¿Cómo hago que la forma sea responsiva para que se vea bien en el móvil?
Como cada punto de esta herramienta se guarda como un porcentaje y no como un valor fijo en píxeles, la forma se escala automáticamente con el ancho y el alto del elemento. No necesitas media queries adicionales para la forma en sí, solo asegúrate de que el elemento contenedor cambie de tamaño como quieres en cada punto de ruptura.
¿Puedo importar una ruta SVG en vez de usar puntos de polígono?
clip-path también acepta un elemento SVG clipPath referenciado por URL, que admite curvas que los polígonos de líneas rectas no pueden producir. Esta herramienta se centra en las funciones polygon(), circle() y ellipse() porque no necesitan marcado SVG aparte y cubren la gran mayoría de formas comunes.
¿Una forma de clip-path compleja ralentiza el rendimiento de la página?
No, no de forma notable. Los navegadores renderizan clip-path en la capa de composición de la GPU, así que incluso un polígono con una docena de puntos tiene un costo de rendimiento insignificante comparado con cosas como grandes box-shadows o filtros backdrop.
¿Esta herramienta guarda o sube las formas que creo?
No. Cada punto, arrastre y cálculo de forma ocurre localmente en tu navegador con JavaScript. Nada se envía a un servidor ni se guarda en ningún sitio, a menos que tú mismo copies el CSS.

Herramientas relacionadas

Probar

Formateador CSS

Formatea código CSS para mejor legibilidad. Herramienta gratuita en línea.

Probar

Generador de Degradados

Crea degradados CSS personalizados con vista previa en vivo. Gratis en línea.

Probar

Generador de Sombras CSS (Box-Shadow)

Diseña sombras CSS personalizadas con vista previa en vivo. Ajusta el desplazamiento, el desenfoque y el color, y copia el código listo para usar.

Probar

Generador de Triángulos CSS

Crea triángulos CSS con vista previa en vivo. Elige dirección, tamaño y color, usa el truco de borde o clip-path, y copia el código.

Probar

Creador de Fondos CSS

Diseña fondos sólidos, degradados y patrones con vista previa en vivo. Ajusta colores, ángulo, posición y espaciado, y copia el CSS.

Probar

Generador de Loaders CSS

Crea spinners de carga CSS con vista previa en vivo. Elige un estilo, ajusta tamaño, color y velocidad, y copia el CSS y HTML.

El Generador de Clip Path CSS es mantenido por CodeItBro. Nuestro objetivo es ofrecer las mejores herramientas gratuitas para desarrolladores en la web. Si tienes comentarios o sugerencias, visita nuestra página de contacto.

Comentarios

Las preguntas, correcciones y consejos útiles son bienvenidos. Los comentarios se revisan antes de publicarse.

Cargando comentarios...

Los comentarios se almacenan y moderan mediante Cusdis Cloud. El correo es opcional. Política de privacidad

Aparece en

CodeItBro - Free dev tools + practical guides to help you ship faster | Product HuntCodeItBro - Free Online Developer Tools badgeCodeItBro badge