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.

Gerador CSS Clip Path – Ferramenta Visual

CSSTools.io

Triangle — 3 points

Generated CSS

Guia Completo de CSS clip-path

A propriedade CSS clip-path define uma região de recorte em qualquer elemento HTML. Suporta círculos, elipses, polígonos, inserções e caminhos SVG.

Formas Básicas

clip-path: circle(50%);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Perguntas Frequentes

Qual é a diferença entre clip-path e overflow:hidden?

overflow:hidden recorta a borda retangular. clip-path recorta em qualquer forma.

Posso usar clip-path com imagens?

Sim. clip-path funciona em qualquer elemento incluindo <img>.

Tool last updated: May 2026

Import SVG Path

Guia Completo de CSS clip-path

Formas Básicas

Perguntas Frequentes