Genera formas CSS clip-path visualmente. Elige entre plantillas o personaliza las tuyas — círculo, elipse, polígono, inset. Copia CSS listo para usar al instante. 100% gratis y del lado del cliente.
clip-path: circle(50% at 50% 50%);El Generador de Clip Path CSS es una herramienta visual para crear formas personalizadas utilizando la propiedad CSS clip-path. En lugar de escribir manualmente coordenadas de polígono complejas, puedes seleccionar entre una variedad de formas predefinidas y personalizar sus parámetros en tiempo real. La propiedad clip-path te permite recortar un elemento a una forma básica o polígono, perfecto para crear diseños únicos, máscaras de imagen y diseños web creativos. Todo el procesamiento ocurre en tu navegador — no se envían datos.
La propiedad CSS clip-path crea una región de recorte que define qué parte de un elemento debe mostrarse. Las partes dentro de la región se muestran, mientras que las partes fuera se ocultan. Puede usar formas básicas como circle() y ellipse(), la función inset() para rectángulos con esquinas redondeadas, o polygon() para formas personalizadas de múltiples puntos.
clip-path con formas básicas (círculo, elipse, inset, polígono) es compatible con todos los navegadores modernos incluyendo Chrome, Firefox, Safari y Edge. Para navegadores antiguos, puede necesitar un diseño alternativo. El prefijo -webkit- ya no es necesario para las versiones actuales de navegadores.
Sí. clip-path se puede aplicar a cualquier elemento HTML incluyendo imágenes, divs, videos e iframes. Se usa comúnmente para crear fotos de perfil circulares, galerías de imágenes hexagonales, divisores diagonales de sección y otros diseños creativos.
border-radius solo redondea las esquinas de un elemento rectangular, manteniéndolo fundamentalmente como un rectángulo. clip-path puede crear cualquier forma arbitraria incluyendo triángulos, estrellas y polígonos personalizados al ocultar partes del elemento por completo. Para formas complejas más allá de rectángulos redondeados, clip-path es la herramienta adecuada.