¿Necesitas crear formas personalizadas para tu sitio web? Este generador de máscaras CSS te permite diseñar elementos con formas únicas usando la propiedad clip-path. Perfecto para imágenes creativas, tarjetas originales y elementos decorativos.
✓ Círculos, elipses, polígonos y más ✓ Vista previa en tiempo real ✓ Código CSS listo para copiar ✓ Compatible con navegadores modernos
Crea formas personalizadas para tus elementos usando la propiedad CSS clip-path. Ideal para imágenes, tarjetas y elementos decorativos.
* Compatible con la mayoría de navegadores modernos
Elemento con máscara
clip-path aplicado/* Código CSS generado */
Círculo
Triángulo
Cuadrado
Pentágono
Hexágono
Corazón
No hay máscaras guardadas
Clip-path es una propiedad CSS que permite crear formas personalizadas recortando un elemento. Puedes usar formas básicas como círculos, elipses o polígonos complejos para crear diseños únicos.
Selecciona el tipo de forma (círculo, elipse, polígono o rectángulo), ajusta los parámetros como radio, posición o número de puntos, y observa los cambios en la vista previa. Luego copia el código CSS generado.
Clip-path es compatible con todos los navegadores modernos: Chrome, Firefox, Safari y Edge. Para navegadores antiguos, funciona con prefijo -webkit-.
Sí, clip-path es perfecto para crear imágenes con formas personalizadas, galerías creativas, avatares únicos y elementos decorativos.
Border-radius solo redondea esquinas, mientras que clip-path puede crear formas complejas como polígonos, estrellas, corazones y cualquier forma imaginable.