Cómo usar: Generador de clip-path CSS
- Elige una forma inicial: polígonos, círculo, elipse o un inset redondeado.
- Arrastra los puntos sobre la imagen. Selecciona un punto y usa + Añadir punto para insertar uno después, o Eliminar punto. Empieza desde Rectángulo para dibujar tu propia forma.
- Para círculos, elipses e insets, usa los deslizadores del panel.
- Copia el CSS y aplícalo a cualquier imagen, vídeo o elemento. Usa Usar mi imagen para previsualizar con tu propia foto.
clip-path en pocas palabras
clip-path oculta todo lo que queda fuera de una forma. El elemento conserva su tamaño y su diseño; solo cambia el área visible, lo que lo hace ideal para imágenes destacadas, avatares, formas de sección y efectos al pasar el ratón (los valores de clip-path con el mismo número de puntos se pueden animar con transition).
| Función | Ejemplo |
|---|---|
polygon() | polygon(50% 0%, 100% 100%, 0% 100%): un triángulo; cualquier número de puntos |
circle() | circle(40% at 50% 50%) |
ellipse() | ellipse(45% 35% at 50% 50%) |
inset() | inset(10% 5% round 24px): un rectángulo redondeado recortado desde los bordes |
Los porcentajes son relativos a la caja del elemento, así que la forma escala con él. Todos los navegadores modernos admiten las formas de clip-path; la línea -webkit- cubre Safari antiguo. Si quieres difuminar los bordes en lugar de recortarlos, usa el Generador de máscaras CSS; para formas orgánicas, el Generador de blobs SVG.
También se busca como: generador clip path, generador clip-path css, clip-path polygon, formas css, crear clip path, generador de polígonos css, clip-path circle, forma de imagen css.
Herramientas que combinan con: Generador de clip-path CSS
- Generador de Border Radius — Redondea las esquinas de cualquier caja: arrastra un control para todas las esquinas o define cada esquina por separado, cambia a esquinas elípticas para formas de blob y hoja, y copia el CSS border-radius válido más corto.
- Generador de triángulos CSS — Crea un triángulo solo con CSS para la flecha de un tooltip, el caret de un desplegable o un globo de diálogo: elige una de las 8 direcciones, el ancho, el alto y el color, y copia el truco del border clásico o una versión más sencilla con clip-path.
- Generador de filtros CSS — Ajusta blur, brillo, contraste, saturación, tono, escala de grises, sepia, invertir y sombra paralela sobre una imagen de ejemplo o la tuya y copia el CSS de filter.
- Generador de Olas SVG — Diseña separadores ondulados para landing pages: añade o quita olas (hasta 6, cada una con su propio color, opacidad y forma), ajusta el número de crestas, la altura y la suavidad, elige colores y decide si la ola va arriba o abajo.
Preguntas frecuentes
¿Cómo creo una forma de polígono CSS?
Elige una forma inicial aquí, arrastra los puntos donde los quieras y copia la línea clip-path: polygon(…). Cada punto es un par x% y% relativo al elemento.
¿Cómo añado más puntos a un polígono clip-path?
Selecciona un punto y haz clic en + Añadir punto: aparece un nuevo punto a mitad de camino hasta el siguiente, listo para arrastrar. Al hacer doble clic en la imagen se añade un punto en el borde más cercano; Eliminar punto borra el seleccionado.
¿Puedo animar clip-path?
Sí. Puedes usar transition o animate entre dos valores de clip-path del mismo tipo y con el mismo número de puntos, por ejemplo dos formas polygon() de 6 puntos cada una.
¿Funciona clip-path en todos los navegadores?
Las formas básicas (polygon, circle, ellipse, inset) funcionan en todos los navegadores modernos. Añade la línea -webkit-clip-path que incluye la herramienta para versiones antiguas de Safari.
¿Por qué desaparece mi sombra con clip-path?
clip-path también recorta box-shadow. Envuelve el elemento en un contenedor padre y usa filter: drop-shadow() en ese contenedor.
¿Puedo instalar Generador de clip-path CSS como aplicación web y utilizarla sin conexión?
Sí. Generador de clip-path CSS es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.