CSS Clip-Path Shape Generator

How it works

Type the fill colour into the left panel — HEX, RGB and HSL all work — and pick a shape from the list; the code and the preview refresh on every change. Choosing the hexagon, for example, produces polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%): six corner points listed as percentages of the box. Because the coordinates are percentages, the same code draws the same shape on a 40-pixel badge and on a 400-pixel banner; the aspect-ratio: 1 / 1 line keeps the box square, and removing it lets the shape stretch with the box. Copy the code into your own selector; the background line is only a demo fill — to crop your own picture, delete it and move the clip-path line onto the element, or apply it directly to an img tag. The Download button saves the preview as a 1200×800 pixel PNG.

This tool is also known as css clip path generator, clip path polygon, css shape generator, css hexagon shape, css star shape, clip path circle.

What is clip-path?

clip-path is the CSS property that decides which region of an element gets painted: the inside of the path you define is visible, everything outside becomes fully transparent. The path can be written four ways — polygon() with a corner list, circle() and ellipse() with curves, inset() with a pulled-in rectangle. Clipping affects only the rendering; the element's position, size and content stay untouched. Cutting photo corners, building badges and ribbons, and framing images in geometric shapes are its most common jobs — all with one line of CSS and no image editing.

What is polygon() coordinates?

polygon() is the clip-path notation that defines a shape by its corner points: each point is a "distance from left, distance from top" pair, separated by commas. Values are usually written as percentages because percentages scale with the box — the same star code works on a small icon and a full-width banner; write pixels instead and the shape stays a fixed size, stranded in a corner when the box grows. Points are connected one after another; put them in the wrong order and the edges cross, splitting the shape into unexpected fragments.

What is the difference between clip-path and overflow: hidden?

overflow: hidden only clips to a rectangle: content spilling out of the box is hidden, but the box's silhouette can never go beyond a rounded rectangle. clip-path cuts the box along any geometric path you define — star, hexagon, arrow, free-form polygon — and it does so by shaping the element itself, not by hiding overflow. They answer different questions: for "hide what spills out", overflow is enough and cheaper; for "this element should not be a rectangle", clip-path is the only way. They also combine: overflow outside for scroll control, clip-path inside for the shape.

The clipping catch: the hidden area still takes up space

clip-path only crops the painting, it does not shrink the box: an element clipped to a triangle still occupies its full rectangle in the page layout, and neighbouring elements will not move into the seemingly empty corners. Hit-testing, on the other hand, follows the clipped shape in most browsers — a click on the invisible corner does nothing, which is the property's defined behaviour, not a bug.

The second common surprise is the shadow: box-shadow is drawn around the box's rectangle and gets cut off by the clip, so a clipped shape shows no shadow underneath. If you need one, use filter: drop-shadow() instead of box-shadow; drop-shadow follows the painted shape and casts along the star's real edge.

How to read the percentages and reshape the result

Each pair inside polygon() is one corner: the first number is the distance from the left, the second from the top, and 0% and 100% are the box edges. Points are joined by lines in the order written, and the last point closes back to the first. Treat the generated code as a starting point: pull the trapezoid's top corners together and it approaches a triangle, push them apart and it approaches a rectangle.

Animating between two shapes also works through these coordinates: transition: clip-path morphs smoothly between two polygon() values only when the point counts match. That is why the octagon and the bevelled-corner frame in this tool (both 8 points) morph into each other cleanly, while hexagon to star jumps without animating.

Frequently asked questions

Can I put a photo inside the clipped shape?

Yes — that is clip-path's main job: the code applies to any element, and on an img tag it crops the photo itself into the shape. The background line in the generated code is only a demo fill; on your own image, delete it and move the clip-path line onto the image element. Bring the aspect-ratio line along too, or the shape will distort with the image's proportions.

Why don't the circle and ellipse use polygon()?

A curved edge can only be approximated with corner points; it would take dozens of them and the edge would still look faceted. clip-path has dedicated notations instead: circle(50% at 50% 50%) defines by centre and radius, ellipse(50% 35% at 50% 50%) by two radii. Both are mathematical curves, so they stay smooth at any size; this tool switches to the correct notation automatically for those two shapes.

What happens in browsers that do not support clip-path?

A very old browser that does not recognise clip-path simply ignores it: the element renders unclipped, as its full rectangle — no content is lost, only the decorative shape. Current Chrome, Firefox, Safari and Edge all support polygon, circle and ellipse unprefixed; only Safari versions that have not been updated in years still want the -webkit-clip-path prefix.

Can I draw a border around the shape's edge?

Not directly: border belongs to the box's rectangle, and the clip cuts it together with everything else, leaving only the fragments that fall inside the shape. The usual workaround is two layers: give the outer element the shape and the border colour, then nest a second element with the same clip-path scaled down by a few percent; the strip left between them reads as a border.