Clip Path Generator
Build a CSS clip-path from preset shapes (triangle, hexagon, star, arrow and more) or a custom inset, with live preview.
This guide is not yet available in your language and is shown in English.
Tool guide
What this tool does
Clip Path Generator provides ready-made polygon shapes, triangle, trapezoid, hexagon, star, arrow, speech bubble and more, plus circle, ellipse and inset modes, previewed live over a gradient block, with the exact clip-path CSS value to copy.
Hand-calculating the polygon coordinate points for a hexagon, star or speech-bubble clip-path shape is genuinely fiddly geometry, easy to get visually wrong without a live preview to check against.
This tool provides a curated set of ready-made shapes, along with circle, ellipse and inset modes, previewed live over a gradient test block so the shape’s outline is unmistakable, with the exact clip-path CSS value ready to copy.
How to use Clip Path Generator
- Choose a shape preset.
- For the inset mode, adjust the inset percentage.
- Review the live preview.
- Copy the generated CSS.
Tips for better results
- clip-path only affects what’s visually rendered, anything outside the shape is hidden but the element’s actual layout box (for spacing/positioning purposes) stays the same size as before clipping.
- A polygon shape is defined as a list of x% y% coordinate points tracing its outline in order; studying a preset’s generated coordinates is a good way to learn how to hand-build a custom polygon shape later.
- The inset() mode is useful for a simple cropped/framed look (cutting evenly or unevenly from each edge), rather than the more complex arbitrary outline shapes polygon() provides.
- For a shape that should be clickable (like a custom-shaped button), remember only the visible clipped area is actually interactive, the invisible clipped-away corners don’t register clicks even though they’re still part of the element’s box.
Common use cases
- Creating a custom-shaped image mask or decorative background element (hexagon, star, speech bubble).
- Building an angled or trapezoid section divider between two page sections.
- Designing a custom arrow or badge shape without needing an actual image asset.
- Learning how clip-path polygon coordinates work by studying and tweaking a preset shape.
Common mistakes to avoid
- Expecting the element’s layout space to shrink to match a clipped shape’s visible area; clip-path only affects rendering, the original box dimensions remain for layout and positioning purposes.
- Expecting the invisible, clipped-away portion of a shape to still be clickable; only the visibly rendered area within the clip-path actually receives pointer interactions.
- Applying clip-path to an element with important content positioned near its edges without checking the preview carefully, content outside the clipped shape’s boundary is simply hidden, not scaled or repositioned to fit.
Frequently asked questions
Does clip-path change an element’s layout size?
No, it only affects what’s visually rendered; the element’s actual box dimensions for layout and positioning purposes remain unchanged, as if the hidden parts were simply invisible rather than removed.
Is the clipped-away area still clickable?
No, only the visibly rendered shape within the clip-path boundary receives pointer/click interactions; the clipped-away corners don’t register clicks even though they’re technically still part of the element’s box.
How are polygon shapes defined?
As an ordered list of x% y% coordinate points tracing the shape’s outline, connecting back to the first point to close the shape; studying a preset’s coordinates is a good way to learn the pattern.
Is this generated locally?
Yes, every shape coordinate calculation and the live preview run entirely client-side in your browser; nothing is sent to any server.
Feedback & suggestions
Help us improve Clip Path Generator. We read every message.