Generador de clip-path

Recorta imágenes y elementos con formas (triángulos, hexágonos, estrellas, flechas…) o dibuja tu propio polígono arrastrando puntos, y copia el clip-path resultante.

¿Qué es clip-path?

clip-path define una máscara: sólo se ve la parte del elemento que queda dentro de la forma; el resto se vuelve invisible (y tampoco recibe clics). El elemento sigue ocupando su caja rectangular en el layout.

Las formas más usadas:

• polygon() — una lista de puntos x y en porcentajes (o px). polygon(50% 0%, 100% 100%, 0% 100%) es un triángulo.
• circle() — un círculo con radio y centro: circle(50% at 50% 50%).
• ellipse() — como el círculo, pero con dos radios.
• inset() — un rectángulo recortado desde los bordes, con esquinas redondeadas opcionales: inset(10% round 16px).

Los porcentajes se miden desde la esquina superior izquierda del elemento: 0% 0% es arriba a la izquierda y 100% 100% abajo a la derecha.

.avatar-hexagonal {
  width: 200px;
  aspect-ratio: 1;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

Generador

Elige una forma arriba. Con las formas poligonales puedes arrastrar los puntos sobre la vista previa, hacer doble clic para añadir uno nuevo y quitar el punto seleccionado desde los controles.

Generador de clip-path

Polígono (6 puntos)

Arrastra los puntos sobre la vista previa. Doble clic en la imagen para añadir un punto en el lado más cercano.

Vista previa

Relleno de muestra Imagen (paisaje)Degradado Mostrar puntos y contorno Incluir -webkit-clip-path (Safari antiguo)

.recorte {
  width: 300px;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

Consejos de uso

• Secciones con corte diagonal: aplica clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%) al fondo de un hero para un look moderno (preset Corte diagonal).
• Funciona igual sobre <img>, <video>, <div> con fondo o texto: úsalo para avatares hexagonales, galerías o insignias.
• clip-path se puede animar con transition si las dos formas tienen el mismo número de puntos: por ejemplo, de un triángulo a otro triángulo, o de circle(0%) a circle(75%) para un efecto de revelado.
• La sombra (box-shadow) también queda recortada. Si quieres sombra con la forma, usa filter: drop-shadow() en un elemento padre.
• Para formas con curvas complejas usa una imagen SVG o mask-image; polygon() sólo hace líneas rectas.

Revelado al pasar el ratón

.foto {
  clip-path: circle(30% at 50% 50%);
  transition: clip-path 0.5s ease;
}

.foto:hover {
  clip-path: circle(75% at 50% 50%);
}

Error común

Los puntos de polygon() se separan con comas y cada punto lleva sus dos coordenadas separadas por espacio: polygon(50% 0%, 100% 100%, 0% 100%). Si mezclas el orden, la forma no se dibuja.