¿Odias los anuncios? Ir Sin publicidad Hoy 

Generador de CSS Clip-Path

ColorDesarrollador

ANUNCIO PUBLICITARIO · ¿ELIMINAR?

APORTE

Proceso automático

Tipo de Forma

Forma

Preajustes

Programar

Configuración de Círculo

Radio %: 50

Centro X %: 50

Centro Y %: 50

Configuración de Elipse

Radio X %: 50

Radio Y %: 40

Centro X %: 50

Centro Y %: 50

Configuración de Interior

Superior %: 10

Derecho %: 10

Inferior %: 10

Izquierdo %: 10

Radio de Borde %: 0

Opciones

Ajustar a la cuadrícula (incrementos de 5%)

Mostrar cuadrícula

PROD.

Lado cliente

ANUNCIO PUBLICITARIO · ¿ELIMINAR?

Guía

Tabla de contenido

Generador de CSS Clip-Path

Cree visualmente formas CSS clip-path con un editor intuitivo de arrastrar y soltar. Construya polígonos, círculos, elipses y formas de interior, luego copie el CSS generado directamente en sus hojas de estilo.

Cómo utilizar

Seleccione un tipo de forma o comience con una plantilla preestablecida. Arrastre los puntos de control para ajustar la forma visualmente en el lienzo de vista previa. El código CSS clip-path se actualiza en tiempo real mientras edita. Cuando esté satisfecho con el resultado, copie el código CSS generado o expórtelo como SVG.

Características

Editor visual de arrastrar y soltar – Cree formas moviendo puntos de control directamente en el lienzo
Múltiples tipos de formas – Polígono, círculo, elipse e interior
Plantillas preestablecidas – Comience con formas comunes como triángulos, estrellas, flechas y más
Deshacer y rehacer – Soporte completo de historial para edición no destructiva
Ajustar a la cuadrícula – Colocación precisa de puntos con ajuste de cuadrícula configurable
Exportación SVG – Descargue su forma como un archivo SVG
Salida CSS en vivo – Copie la propiedad clip-path generada al instante

ANUNCIO PUBLICITARIO · ¿ELIMINAR?

 Preguntas frecuentes

¿Qué es un clip-path CSS y cómo funciona?

CSS clip-path define una región de recorte que determina qué partes de un elemento son visibles. Todo lo que esté fuera de la forma clip-path se oculta. Admite formas básicas (círculo, elipse, interior, polígono) y definiciones de rutas SVG. A diferencia de overflow:hidden que solo recorta a los límites rectangulares, clip-path puede crear áreas visibles complejas no rectangulares para diseños y efectos visuales creativos.
¿Cuál es la diferencia entre clip-path y mask en CSS?

Clip-path crea un borde duro: los píxeles son completamente visibles o completamente ocultos según si caen dentro de la forma definida. CSS mask utiliza una imagen o gradiente para controlar la transparencia, permitiendo bordes suaves y transparencia parcial. Clip-path es más simple y eficiente para formas geométricas, mientras que las máscaras ofrecen un control más artístico con gradientes y canales alfa.
¿Cómo funcionan las coordenadas de polígono CSS?

Las coordenadas de polígono en clip-path utilizan valores porcentuales o de longitud relativos al cuadro delimitador del elemento. Cada punto se define como un par x,y donde 0% 0% es la esquina superior izquierda y 100% 100% es la inferior derecha. Los puntos se conectan en orden para formar la forma. Por ejemplo, polygon(50% 0%, 100% 100%, 0% 100%) crea un triángulo. La forma se cierra automáticamente conectando el último punto con el primero.