Generador de Clip-Path CSS

Esta herramienta genera un valor CSS clip-path a partir de una forma predefinida — círculo, elipse, triángulo, pentágono, hexágono, estrella o un rectángulo redondeado — y muestra la forma recortada en vivo en un cuadro de vista previa antes de que copies el CSS. No necesitas calcular a mano las coordenadas de polygon() para formas comunes.

¿Qué es esta herramienta?

clip-path es la propiedad CSS que oculta todo lo que está fuera de una región definida de un elemento, dejando visible solo la forma interior — el resto del cuadro del elemento sigue ahí en el diseño, simplemente no se pinta. Acepta funciones de forma básicas como circle(), ellipse(), inset() y polygon(), esta última recibiendo una lista arbitraria de pares de coordenadas x/y para definir cualquier forma de bordes rectos.

Las coordenadas de polygon() son la parte más difícil de escribir a mano — un pentágono, un hexágono o una estrella necesitan cada uno varios puntos colocados con precisión, y equivocarse en uno distorsiona toda la forma. Esta herramienta calcula esas coordenadas por ti a partir de una forma predefinida, actualiza la vista previa en vivo al instante y te da el CSS clip-path exacto para copiar.

Fuente: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — las especificaciones que definen clip-path y sus funciones de forma básicas.

¿Por qué utilizarlo?

La vista previa en vivo recorta un cuadro de vista previa real con la forma elegida, así que ves el resultado real en lugar de imaginarlo a partir de coordenadas.
Siete formas predefinidas — círculo, elipse, triángulo, pentágono, hexágono, estrella y rectángulo redondeado — cubren la gran mayoría de los casos de uso de clip-path sin escribir puntos de polygon() a mano.
Las formas de círculo, elipse y rectángulo redondeado incluyen un control deslizante de tamaño/redondeo para que puedas ajustar la forma sin editar coordenadas.
Genera el CSS clip-path estándar listo para pegar en cualquier elemento.
Se ejecuta enteramente en tu navegador — nada de lo que configuras se sube a ningún sitio. Gratis, sin registro, funciona en móvil.

Cómo utilizarlo

Elige una forma del menú desplegable — círculo, elipse, triángulo, pentágono, hexágono, estrella o rectángulo redondeado.
Para las formas de círculo, elipse y rectángulo redondeado, ajusta el control deslizante de tamaño/redondeo para afinar el recorte.
Observa cómo se actualiza el cuadro de vista previa en vivo al cambiar la forma o el control deslizante.
Copia el CSS clip-path generado y pégalo en el elemento que quieras recortar.
Para una imagen en lugar de un color sólido, aplica la misma propiedad clip-path a una etiqueta <img> o a un elemento con una background-image.

Ejemplo

Entrada

Forma: Hexágono

Resultado

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Un recorte hexagonal regular, usado habitualmente para fotos de perfil estilo insignia o iconos de funciones.

Formas básicas vs. polygon()

Círculo, elipse e inset (rectángulo redondeado) son funciones de forma básica integradas en CSS con su propia sintaxis sencilla — uno o dos radios, más una posición central opcional o un redondeo de esquinas. Triángulo, pentágono, hexágono y estrella no son formas integradas; todas se expresan con polygon(), una lista plana de pares de coordenadas x/y que traza el contorno de la forma. Esta herramienta calcula automáticamente esas coordenadas para polígonos regulares (espaciados uniformemente) y una estrella de cinco puntas, que es la parte tediosa de acertar a mano.

Patrones habituales de clip-path

Avatar o insignia circular: circle() con un radio medio, a menudo combinado con una imagen fuente cuadrada para que el círculo no se deforme en una elipse.
Divisor de sección en ángulo: un polígono personalizado (no incluido como preset aquí) que inclina el borde superior o inferior de una sección de ancho completo para un corte de página no rectangular.
Icono o insignia de calificación en estrella: el preset de estrella, útil como forma decorativa en lugar de un SVG dibujado a mano para casos sencillos.
Cuadrícula de fotos hexagonal: imágenes recortadas en hexágono dispuestas en un patrón de panal, un patrón habitual en páginas de portafolio o equipo.
Rectángulo redondeado como alternativa ligera a border-radius cuando también necesitas que el recorte corte el contenido hijo desbordado, ya que border-radius por sí solo no recorta a los hijos sin un overflow:hidden adicional.

Combínalo con otras herramientas CSS

clip-path se combina con frecuencia con un degradado CSS como el fondo que se recorta, o con un box-shadow aplicado a un elemento contenedor (dado que clip-path también recorta la sombra propia del elemento, una sombra en un padre es la solución habitual para una forma recortada que aún necesita parecer que flota).

→ Generador de Gradientes CSS · Generador de Border Radius · Generador de Box Shadow

Preguntas frecuentes

¿clip-path afecta el tamaño del diseño del elemento?

No — el elemento mantiene su tamaño y posición de cuadro originales a efectos de diseño; clip-path solo cambia lo que se pinta. Los elementos que lo rodean se disponen como si el recorte no se hubiera aplicado, lo cual puede sorprenderte si esperabas que la forma recortada se comportara como un elemento redimensionado.

¿Por qué no se ve el box-shadow en mi forma recortada?

clip-path recorta todo el renderizado del elemento, incluida cualquier sombra que proyecte, así que el box-shadow propio de un elemento recortado en círculo o polígono queda cortado en el límite del recorte. Para conseguir una sombra que siga la forma visible, aplica box-shadow a un elemento contenedor sin recortar alrededor del elemento recortado.

¿Puedo animar o hacer una transición de una forma clip-path?

Sí, pero solo entre dos valores clip-path del mismo tipo y con el mismo número de puntos — por ejemplo, un polygon() con 6 puntos que transiciona a otro polygon() con 6 puntos. Transicionar entre formas fundamentalmente diferentes (un circle() a un polygon()) generalmente no se anima con suavidad en todos los navegadores.

¿Puede usarse clip-path en imágenes de fondo, no solo en el contenido del elemento?

clip-path recorta todo el elemento — incluyendo su background-image, background-color, bordes y contenido juntos — en lugar del fondo específicamente. Si solo quieres recortar una imagen de fondo manteniendo el resto del contenido sin recortar, aplica clip-path a un elemento separado que contenga únicamente el fondo.

¿clip-path es compatible con todos los navegadores modernos?

Sí — clip-path con funciones de forma básica (circle, ellipse, inset, polygon) es Baseline y está ampliamente disponible en los principales navegadores desde enero de 2020, según los datos de compatibilidad de MDN. Generalmente es seguro usarlo en producción sin un fallback para versiones actuales de navegadores.