What does this tool do?
The CSS clip-path Generator lets you pick a ready-made shape — triangle, hexagon, star, arrow, circle and more — and instantly get the matching clip-path CSS. Web developers and designers can crop images and boxes into custom outlines without writing the polygon math themselves.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
How it works
Select a shape from the grid and the preview box, filled with a gradient, is clipped to that outline while the exact CSS line appears below — for example clip-path: polygon(50% 0%, 0% 100%, 100% 100%); produces a triangle. Hit Copy to grab the code and paste it into any element's style. Available shapes include triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, star, arrow, chevron, circle, ellipse and a speech-bubble message.
Where to use it
It is ideal for slanted hero edges, hexagon avatar grids, arrow-shaped step indicators or star badges. Because polygon() uses percentage coordinates, the crop stays proportional when the element resizes, so it works well in responsive layouts. The circle() and ellipse() presets are handy for rounding images without separate masks. The output is plain CSS, so it drops into any framework or static page.
Frequently asked questions
Can I customize the generated shape?
The tool offers presets; once copied, you can hand-edit the percentage values inside polygon() to nudge each corner exactly where you want it.
Does clip-path work in all browsers?
polygon, circle and ellipse values are supported in all modern browsers; for very old browsers it is wise to define a fallback appearance.
Does the clipped area block clicks?
clip-path limits the element to its visible part, and the hidden region falls outside the hit area, so interaction follows the clipped shape too.
Is Clip Path Generator free?
Yes. Clip Path Generator and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. Clip Path Generator works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.