Clip-path generator

What clip-path does

clip-path clips an element to a shape: whatever falls outside isn’t painted and doesn’t receive clicks. It works on any element, not just images, and doesn’t change the space it takes up on the page, so the rest of the layout stays put. It’s the modern way to make hexagonal avatars, headers with a slanted edge or speech-bubble cards without exporting a single image.

The four basic shapes

• circle(50% at 50% 50%): radius and centre. A 50% radius on a square image gives a perfect circle.
• ellipse(50% 35% at 50% 50%): two radii, horizontal and vertical.
• inset(10% round 8%): a rectangle pushed in from each side, with optional rounded corners. Handy for trimming margins without touching the image.
• polygon(…): a list of x y points. With percentages, the shape adapts to any size.

Animating a clip-path

Two polygons with the same number of points can be animated with transition: the browser moves each point towards its partner. That’s why “reveal” effects usually start from a polygon with all its points squashed into a line. If the number of points doesn’t match, the change is instant.

Tips

• Shadows from box-shadow get clipped too. For a shadow that follows the shape, use filter: drop-shadow() on a parent element.
• For curved shapes, clip-path: path() accepts an SVG path, but in fixed pixels; the percentages of polygon() are more practical in fluid layouts.
• The sample photo comes from /random, the photo bank of the ximg.es generator, with a fixed seed so it’s always the same: https://ximg.es/random/960x640.jpg?seed=ximg-clip.