Este sitio usa analítica propia y respetuosa con la privacidad para saber qué páginas y herramientas son útiles. No se comparte ningún dato con rastreadores ni anunciantes externos. Saber más

Herramientas · CSS · Generador de clip-path

Generador de clip-path

Crea una forma de recorte CSS clip-path: polígono, círculo, elipse o rectángulo interior, con una vista previa en vivo, y copia el código.

Suelta un archivo aquí, o elige uno.

Funciona por completo en tu navegador. No se sube ningún archivo.

Cómo funciona

  1. Elige un tipo de forma (polígono, círculo, elipse o rectángulo interior), o un preajuste de polígono.

  2. Arrastra los puntos en la vista previa, o usa los controles deslizantes, para afinar la forma.

  3. Copia el CSS clip-path generado.

Preguntas frecuentes

No. La forma se genera y se muestra por completo en tu navegador - esto es solo matemáticas y texto CSS.

No en esta versión: elige el preajuste más parecido y arrastra sus puntos existentes. Un editor de puntos completo es una posible mejora futura.

Algunas combinaciones, como un rectángulo interior que cubre toda la caja, son CSS válido que recorta todo. No es un error, solo un valor legal pero degenerado.

Sí. Usa Tab para llegar a un punto y las flechas para moverlo - Mayús para un paso mayor.

Herramientas relacionadas

Crear degradado CSS

Crea un degradado CSS lineal, radial o cónico, y copia el código.

 Crear una sombra CSS

Crea una sombra CSS de varias capas (box-shadow) con vista previa en vivo, y copia el código.

 Redondear esquinas en CSS

Da forma a cada esquina de una caja por separado, o combínalas en una forma orgánica, y copia el CSS border-radius.

 Crear un efecto glassmorphism

Crea una tarjeta de vidrio esmerilado con desenfoque de fondo, transparencia y borde suave, y copia el CSS.

 Generador de curvas cubic-bezier

Arrastra una curva para crear un valor de aceleración cubic-bezier(), obsérvala en acción con una transición CSS en vivo, y copia el código.

 Minificador y formateador de CSS

Minifica o formatea CSS, en vivo mientras pegas, completamente en tu navegador.

 Zona de pruebas Flexbox

Crea un diseño CSS flexbox: dirección, ajuste de línea, justificación, alineación, espacio, y crecimiento/reducción/base por elemento, con una vista previa en vivo, y copia el código.

 Zona de pruebas Grid

Crea un diseño CSS grid: número de pistas, espacios, alineación, y colocación por elemento, con una vista previa en vivo, y copia el código.

Comentarios

  1. Aún no hay comentarios. Sé el primero en compartir tu experiencia.
Tu valoración (opcional)

Ninguna valoración seleccionada