How do I make a hexagon with CSS clip-path?

Use clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). The six coordinate pairs trace each corner of the hexagon, starting top-left and moving clockwise.

What's the difference between clip-path and mask?

clip-path uses geometric shapes (polygon, circle, ellipse, inset, path) and produces a hard, pixel-perfect edge. mask uses an image or gradient as an alpha channel, producing soft, semi-transparent edges. Use clip-path for shapes; use mask for fades and image-based effects.

Why is my clip-path not working?

Three common causes: the element has no width or height; percentage values are relative to the element's size, so a child smaller than expected produces a tiny clip; or overflow is hidden on a parent. Also check that all polygon points are inside the 0% to 100% range.

Can I animate clip-path?

Yes, but only between shapes with the same number of points. To animate from a triangle (3 points) to a square (4 points), define the triangle as a 4-point polygon with two coincident points. Add transition: clip-path 0.4s ease and change the polygon on hover.

Does clip-path work on background images?

Yes. clip-path applies to any element including ones with background-image. The clipped region affects the element's entire visible area. To clip only the image, apply clip-path to a child img element or use the mask property.

How do I clip an image into a star or speech bubble shape?

Apply clip-path directly to the img element. Choose the Star or Speech Bubble preset in the generator, copy the generated CSS, and paste the polygon onto your image's selector.

Generador CSS Clip Path – Herramienta Visual

CSSTools.io

Triangle — 3 points

Generated CSS

Guía Completa de CSS clip-path

La propiedad CSS clip-path define una región de recorte en cualquier elemento HTML. Solo es visible lo que está dentro de la ruta de recorte. Soporta círculos, elipses, polígonos, insertes y rutas SVG.

Formas Básicas

clip-path: circle(50%);
clip-path: ellipse(60% 40% at 50% 50%);
clip-path: inset(10px 20px round 8px);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Preguntas Frecuentes

¿Cuál es la diferencia entre clip-path y overflow:hidden?

overflow:hidden recorta al borde rectangular. clip-path recorta a cualquier forma y puede animarse.

¿Puedo usar clip-path con imágenes?

Sí. clip-path funciona en cualquier elemento incluyendo <img> y <video>.

¿Afecta clip-path a los eventos de clic?

Sí. Los eventos de puntero solo se activan dentro del área de recorte.

Tool last updated: May 2026

Import SVG Path

Guía Completa de CSS clip-path

Formas Básicas

Preguntas Frecuentes