Generador de clip-path CSS
Edita visualmente formas clip-path de CSS con preajustes, puntos de polígono arrastrables y controles deslizantes. Copia el CSS de clip-path.
🔒 Se ejecuta completamente en tu navegador — nada se cargaDiseña formas clip-path de CSS de forma visual
La propiedad clip-path te permite recortar un elemento en casi cualquier forma usando solo CSS. Avatares hexagonales, bordes de sección inclinados, botones con forma de flecha y bocadillos de diálogo pueden crearse sin imágenes ni marcado adicional. Sin embargo, escribir a mano las coordenadas de un polígono resulta tedioso. Este generador ofrece una vista previa en vivo con controladores arrastrables, para que puedas dar forma al elemento y copiar la declaración terminada.
Polígonos, círculos, elipses e insets
La herramienta admite las principales funciones de forma básica. polygon() recibe una lista de puntos escritos como porcentajes x e y, ideal para triángulos, trapecios, estrellas y flechas. circle() y ellipse() reciben un radio y una posición central, e inset() recorta hacia dentro desde cada borde de la caja con un radio opcional para las esquinas redondeadas. Elige un preajuste como punto de partida y refínalo. En los polígonos, arrastra cualquier controlador para mover un vértice, o enfoca un controlador y usa las teclas de flecha para pasos precisos del uno por ciento, manteniendo pulsado Shift para saltos más grandes.
Consejos para usar clip-path
Como todos los valores son porcentajes, la forma se escala con el elemento, lo que la hace muy adecuada para diseños responsive. Recuerda que clip-path solo afecta al pintado: los bordes y las sombras de caja que quedan fuera de la forma también se recortan, así que usa un elemento contenedor con filter: drop-shadow() si necesitas una sombra que siga la forma. También puedes animar la transición entre dos polígonos con el mismo número de puntos usando transiciones CSS para lograr efectos de morphing suaves. El código generado es una sola línea que puedes pegar en cualquier hoja de estilos, y toda la edición se realiza localmente en tu navegador.
Cómo usar
- Elige un preajusteEmpieza con una forma como un triángulo, hexágono, estrella, flecha, círculo o rectángulo inset.
- Edita la formaArrastra los controladores del polígono o usa los controles deslizantes para las formas circle, ellipse e inset.
- Añade o elimina puntosSelecciona un punto y añade otro después de él o elimínalo para refinar el polígono.
- Copia el CSSCopia la declaración clip-path y aplícala a cualquier elemento.