CSS clip-path generator — cut images into hexagons, stars and custom polygons

How to use the CSS clip-path generator

1. Choose a Shape. Presets include triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, star, cross, arrow-right, chevron, message, close, circle, ellipse and inset.
2. For Regular polygon (n sides) or Star (n points), set Sides / points and Rotation; stars also have Inner radius.
3. For Custom points, type one x y pair per line. Bare numbers are treated as percentages.
4. The preview shows the sample photo cut to your shape over a faint copy of the full image, so you can see what is removed.
5. Copy the clip-path line.

What it does and when to use it

clip-path crops an element to a shape. Use it for hexagon avatars, angled section edges, arrow-shaped tags, speech-bubble cards (the “message” preset) or star badges, without editing the image file. It also crops videos, gradients and whole blocks of content.

For a simple one-direction arrow, the CSS triangle generator offers a lighter border-based version. Rounded rectangles and blobs are easier with the border radius generator, and soft fading edges need a mask instead, from the mask fade generator.

How it works

Regular polygons and stars are calculated on a circle centred at 50% 50% with a radius of 50%. The first point sits at the top, and each next point is placed at an equal angle step clockwise. For a star, every second point is pulled in to the inner radius. Coordinates are rounded to two decimals. Custom lines are checked one by one, and a polygon needs at least three points.

MDN lists clip-path as Baseline widely available since January 2020.

Worked examples

The default hexagon. clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); It looks like a true hexagon only on a square element; on a wide box it stretches.

A five-point star with a 40% inner radius. Star (n points), 5 points, rotation 0 gives ten points, starting polygon(50% 0%, 61.76% 33.82%, 97.55% 34.55%, …).

An angled section edge. Custom points 0 0, 100 0, 100 85, 0 100 give clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%); The bottom edge now slopes upward to the right, a common hero-banner style.

Limits and tips

• Only straight edges for polygons. For curves, the circle, ellipse and inset presets help; complex curves need an SVG path.
• A bad custom line names itself, for example Line 2 ("100") should be two numbers such as "50% 0%".
• Keep text away from the edges. Content near a cut corner is clipped too.