Generador de CSS clip-path (polígono, círculo)
Color
`clip-path` es la propiedad CSS que recorta cualquier elemento DOM en una forma no rectangular — útil para máscaras de imagen, divisores de sección elegantes, tarjetas decorativas, botones personalizados y efectos hover estilo Photoshop. La sintaxis es corta pero estricta: `circle(r at cx cy)`, `ellipse(rx ry at cx cy)`, `polygon(x1 y1, x2 y2, …)` e `inset(top right bottom left round r)`. Esta herramienta ofrece vista previa en vivo con tres fondos intercambiables (imagen, color sólido, gradiente) y los parámetros como sliders / inputs numéricos. Para polígonos puedes editar las coordenadas % de cada vértice, o hacer clic en cualquier parte de la vista previa para añadir un nuevo punto — útil para trazar formas a mano alzada. Diez polígonos preset (triángulo, rombo, pentágono, hexágono, estrella, flecha, bocadillo, paralelogramo, trapecio, plus) cubren los casos comunes. La salida es una declaración clip-path con el prefijo -webkit-clip-path como fallback, lista para pegar en cualquier hoja de estilo.
Tip: haz clic en la vista previa para añadir un vértice del polígono ahí.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);Sobre clip-path
clip-path soporta formas básicas (círculo, elipse, polígono, inset), CSS `path()` con datos SVG, `url(#id)` que referencia un <clipPath> SVG inline, y palabras clave de geometry-box. Esta herramienta emite la forma básica, la más soportada y fácil de mantener. Todos los % se refieren a la caja de referencia del elemento (por defecto: border-box). El elemento sigue ocupando su layout original — el recorte solo afecta al renderizado. Para formas curvas complejas, dibuja un SVG <path> y referéncialo con clip-path: url(#myShape).
Cómo usar
- Elige una forma: círculo (un radio + centro), elipse (dos radios + centro), polígono (3-16 vértices) o inset (rectángulo recortado en cada borde con esquinas redondeadas opcionales).
- Ajusta con sliders o inputs. Para polígonos, haz clic en cualquier parte de la vista previa para añadir un vértice ahí.
- Pulsa un preset (triángulo, hexágono, estrella, flecha, …) para empezar desde una forma conocida y editarla.
- Cambia el fondo de la vista previa (imagen, sólido, gradiente) para ver cómo lucirá tu forma sobre contenido real.
- Copia el CSS — incluye `clip-path` moderno y el fallback `-webkit-clip-path` para Safari antiguo.
Preguntas frecuentes
- ¿Por qué clip-path usa porcentajes?
- Los porcentajes hacen la forma responsiva: un triángulo `polygon(50% 0%, 100% 100%, 0% 100%)` sigue siendo triángulo tenga 100px o 1000px de ancho. También puedes usar px, em, rem, pero para componentes reutilizables % es casi siempre lo correcto. Esta herramienta solo emite % — pega y cambia las unidades en tu CSS si realmente necesitas tamaño fijo.
- ¿El elemento mantiene su espacio original?
- Sí. `clip-path` es efecto puramente de pintura — la caja de layout del elemento no cambia, así que el contenido alrededor fluye por el rectángulo original, no la forma recortada. Si necesitas que el layout respete la forma visible, usa `shape-outside` (otra propiedad), `mask-image`, o un SVG con path.
- ¿Puedo animar clip-path?
- Sí, pero solo entre paths con el mismo número de vértices en la misma familia de forma — puedes animar polígono a polígono con vértices idénticos, o círculo a círculo, pero no polígono a círculo. Para morphing de polígonos ambos estados deben tener el mismo número de puntos en orden aproximadamente igual. El navegador interpola las coordenadas linealmente.
- ¿Para qué sirve el valor 'round' de inset?
- Es un radio opcional aplicado a las cuatro esquinas del rectángulo inset — misma sintaxis que `border-radius`. `inset(10% round 5%)` es un clip rectangular redondeado. Pon 0 (sin `round`) para esquinas vivas. La spec CSS permite distintos radios por esquina (`round 10% 20% 5% 15%`) pero esta herramienta usa un valor uniforme único.
- ¿Por qué clip-path y -webkit-clip-path?
- Safari necesita el prefijo `-webkit-clip-path` en versiones anteriores a 14.1 (2021). Casi todos los navegadores actuales soportan `clip-path` sin prefijo. Emitir ambos no cuesta nada y protege a usuarios con dispositivos algo antiguos. Puedes quitar la línea `-webkit-` si solo apuntas a navegadores evergreen.
Herramientas relacionadas
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Generador de CSS Box Shadow
Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de Paleta de Colores
Crea paletas armoniosas desde un color base con seis esquemas.
Comprobador de Contraste de Color
Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.