digtools
✂️
css clip-path generator,

Generador de clip-path CSS

Un generador intuitivo para crear formas clip-path CSS mediante arrastrar y soltar. Soporta polígonos, círculos y elipses.

🖱️
Arrastrar y soltar para crear clip-paths intuitivamente
⭐
Soporta tanto CSS estándar como Tailwind
✨
Genera automáticamente código de animación al pasar el cursor (hover)

Editor

Haga clic para añadir vértices. Arrastre para mover. Clic derecho para borrar.

# X % Y %

Ajustes de vista previa

Animación Hover

Si se activa, se generará código para hover. Asegúrese de que el número de vértices coincida.

0.4s

Código generado

También te puede interesar

✨

Generador de CSS View Transition

🎨

Conversor de Color

🎨

Selector de Color de Imagen

about,

Acerca del Generador clip-path

Herramienta online para crear intuitivamente propiedades clip-path CSS.

Antes, recortar requería cálculos manuales. Ahora, genere código con un clic.

Soporta diversas formas y genera código para animaciones.

how to,

Cómo usar

STEP 1

1️⃣ Elija forma

Elija un preajuste o seleccione un modo.

STEP 2

2️⃣ Ajuste

Arrastre los vértices. Clic para añadir o derecho para eliminar.

STEP 3

3️⃣ Copie el código

Copie y pegue en su CSS o Tailwind.

property,

Guía de propiedades

Explicación de las principales funciones:

■ polygon() — Polígono

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)
Especifique coordenadas. Mínimo 3 vértices.

■ circle() — Círculo

clip-path: circle(radio at centroX centroY)
Especifica el radio y las coordenadas del centro.

■ ellipse() — Elipse

clip-path: ellipse(rx ry at centroX centroY)
Dibuja una elipse.

■ inset() — Recorte Rectangular

clip-path: inset(arriba derecha abajo izquierda round radio)
Especifica cuánto cortar hacia adentro. Soporta bordes redondeados.

faq,

FAQ

Q.¿Afecta clip-path al SEO?
No. Solo cambia la representación visual y no altera la estructura HTML. Los motores de búsqueda indexan el texto normalmente.
Q.¿Diferencia entre clip-path CSS y clipPath SVG?
CSS opera dentro de hojas de estilo usando funciones. SVG define un elemento y se hace referencia a él.
Q.¿Puedo animar clip-path en hover?
Sí. Puede animar la transición si el número de vértices es el mismo.
Q.¿Las áreas fuera del clip-path son clicables?
No. Los eventos no se activan fuera de la región recortada.
Q.¿Existen riesgos de seguridad?
Ninguno. Todo se ejecuta localmente en su navegador.
use cases,

Casos de uso

🎨

Cortes diagonales

Cree impresiones dinámicas recortando imágenes en diagonal.

👤

Imágenes de perfil

Recorte imágenes en formas personalizadas como hexágonos o estrellas.

✨

Animaciones hover

Anímela al tamaño completo al pasar el ratón.

Herramientas Relacionadas

Generadores CSSVer todas
✨

Generador de CSS View Transition

Simula animaciones de View Transition API y genera código para SPA y MPA.

🎨

Conversor de Color

Convierte códigos HEX/RGB/HSL/CMYK. Incluye generación de paletas.

🎨

Selector de Color de Imagen

Extrae colores de imágenes y obtén códigos (HEX/RGB)

↔️

Generador de CSS Clamp

Calcula automáticamente los valores de la función clamp() fluida para diseño responsivo.

📦

Generador Container Query CSS

Genera container queries visualmente con vista previa en vivo y conversión.

🖼️

Generador Filtros y Mezclas CSS

Combina filtros visualmente, genera código y guarda imágenes.

🎨

Generador de Gradientes CSS

Genera gradientes lineales, radiales, cónicos y patrones intuitivamente.

📐

Generador de Flexbox/Grid

Genera código de diseño con una interfaz visual

☁️

Generador de Box-Shadow

Crea de forma intuitiva hermosas sombras multicapa

Todas las Categorías

Herramientas para Desarrolladores Generadores CSS Herramientas de Imagen y Foto Herramientas de Video y Audio SEO y Marketing Redes e Infraestructura Análisis y Procesamiento de Texto Herramientas de Finanzas y Salario Herramientas de Fecha y Calendario Herramientas de Documentos y Negocios Juegos y Eventos Vida y Salud Página Principal

Enviar comentarios

Déjenos saber su opinión para ayudarnos a mejorar la herramienta.

Descargo de Responsabilidad

Las herramientas proporcionadas en este sitio son de uso completamente gratuito, pero utilícelas bajo su propio riesgo. No ofrecemos garantías sobre la precisión, integridad o seguridad de los resultados de cálculo, resultados de conversión o datos generados. Tenga en cuenta que el operador no asume ninguna responsabilidad por los daños o problemas causados por el uso de estas herramientas. La mayoría de las herramientas procesan archivos y cálculos localmente en su navegador, lo que significa que los datos ingresados no se envían ni se almacenan en nuestros servidores.