TL
Tool Lab
💰Donar
💰Donar

CSS Clip-Path Generator

Generate CSS clip-path shapes visually.

.element {
  clip-path: circle(40% at 50% 50%);
}

Acerca de esta herramienta

El Generador de CSS Clip-Path crea valores clip-path para cuatro tipos de formas: circle(), ellipse(), inset() y polygon(). clip-path define la región visible de un elemento.

Permite diseños creativos, máscaras de imagen y formas de sección hero sin archivos SVG. Todos los parámetros actualizan la vista previa en tiempo real.

Cómo usar

  1. Selecciona un tipo de forma: circle, ellipse, inset o polygon.
  2. Ajusta los controles deslizantes para configurar los parámetros de la forma.
  3. Para polígonos, elige una forma predefinida de la lista.
  4. La vista previa se actualiza en tiempo real mientras ajustas.
  5. Haz clic en Copiar para copiar el CSS al portapapeles.

Casos de uso

Las secciones hero usan clip-path diagonal o curvo como divisores visuales. Las imágenes de perfil usan circle() para avatares circulares. Los efectos hover usan animaciones clip-path.

Preguntas frecuentes

  • ¿Afecta clip-path al área de clic? — Sí. Las regiones recortadas no son clicables. Tenlo en cuenta en elementos interactivos.
  • ¿Puedo animar clip-path? — Sí. Se puede transicionar y animar entre dos formas de polígono con el mismo número de puntos.
  • ¿Es compatible clip-path con todos los navegadores? — Sí, con soporte completo en todos los navegadores modernos.