Generador de clip-path CSS
Crea clip-path con plantillas como polígono, círculo o estrella, con vista previa y copia del CSS
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Haz clic en una de las plantillas de formas más habituales —triángulo, rombo, hexágono, estrella, flecha, círculo, elipse— y la herramienta genera al instante el valor clip-path de CSS. Ves el efecto de recorte en tiempo real sobre una caja de color o sobre una imagen que subas, y puedes editar el valor directamente o copiarlo tal cual.
Cómo usar
- Pulsa el botón de la plantilla de forma que quieras para elegir la figura del clip-path.
- Si lo necesitas, edita directamente el valor de clip-path para ajustar con precisión las coordenadas.
- Añade una imagen de vista previa para comprobar cómo queda aplicada sobre una foto real.
- Copia el CSS de clip-path terminado y pégalo en el elemento que quieras.
Preguntas frecuentes
- ¿Cómo funciona clip-path?
- Deja visible solo la parte del elemento que queda dentro de la forma indicada (polígono, círculo, etc.) y recorta el resto para ocultarlo. En realidad no corta el elemento, sino que solo enmascara el área visible, así que al cambiar el valor el contenido original vuelve a aparecer intacto.
- ¿Puedo cambiar directamente las coordenadas del polígono?
- Sí. En el campo de valor puedes editar directamente las coordenadas de cada vértice con el formato «polygon(x% y%, …)». La x es la proporción (%) desde la izquierda y la y desde arriba. Si la sintaxis es incorrecta se muestra el original sin recorte, así que puedes experimentar con tranquilidad.
- ¿Funciona en todos los navegadores?
- Las formas básicas como polygon, circle y ellipse tienen amplio soporte en los navegadores actuales, pero el renderizado puede variar según el dispositivo, así que compruébalo antes de aplicarlo. Las imágenes que subas se procesan solo en el navegador, sin envío a ningún servidor.