|
Drag points · click a + dot to add a point · Alt-click a point to remove it
Presets
CSS
.element { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
How to use
01
Start from a preset or your own file
Pick one of 16 shape presets, import an SVG (we convert the path to a responsive polygon), or upload a PNG with transparency and we trace its silhouette into points automatically.
02
Drag the points
Drag any point to reshape. Click the small + dots between points to add a new one, Alt-click a point to delete it, and use Undo to step back.
03
Copy the CSS
The clip-path updates live on your own uploaded image or the demo gradient. Percentages keep it fully responsive — copy the snippet with the -webkit- prefix included.
Why CSS Clip Path Generator
- Visual drag-and-drop editing — no manual coordinate writing.
- Import any SVG: the path is sampled and converted into a responsive percentage polygon.
- Trace PNG silhouettes into clip-path shapes automatically (transparent PNGs work best).
- 16 ready presets: arrows, stars, chevrons, message bubbles, frames and more.
- Circle, ellipse and inset modes with sliders, plus raw path() output.
- Preview on your own image, output is responsive percentages, copied in one click.
Common questions
Why percentages instead of pixels?
polygon() with percentage coordinates scales with the element, so the same clip-path works at any size — that's what makes the output responsive. The path() syntax (from SVG imports) is pixel-based and only fits one specific element size, which is why we also auto-convert SVGs to percentage polygons.
How does PNG tracing work?
We read the image's alpha channel (or treat near-white as background for flat images), find the outline of the biggest shape with a contour-tracing algorithm, then simplify it with the Ramer–Douglas–Peucker algorithm. The detail slider controls how aggressively points are merged. Everything runs in your browser.
Does clip-path affect the element's hit area?
Yes — clicks outside the clipped region fall through to elements behind it, which is great for non-rectangular buttons and cards.
What's browser support like?
polygon(), circle(), ellipse() and inset() work in all modern browsers. We include the -webkit- prefix for older Safari. path() needs Chrome 88+, Safari 13.1+, Firefox 97+.
Is CSS Clip Path Generator free to use?
Yes. CSS Clip Path Generator is completely free. There is no sign up, no trial, and no usage cap.
Do I need an account to use CSS Clip Path Generator?
No. You can start using CSS Clip Path Generator straight away. We do not ask for an email address or a login.
Is my data uploaded to a server when I use CSS Clip Path Generator?
No. CSS Clip Path Generator runs entirely inside your browser, so the settings you enter never leaves your device and nothing is sent to us.
Do you store the settings I use with CSS Clip Path Generator?
No. Because everything happens locally in your browser, there is nothing for us to store. Close the tab and it is gone.
Can I paste the output of CSS Clip Path Generator straight into my project?
Yes. CSS Clip Path Generator gives you ready to use CSS that you can copy and drop into your stylesheet.
Does the CSS from CSS Clip Path Generator work across browsers?
The generated CSS uses widely supported properties so it works in all modern browsers.
How do I use CSS Clip Path Generator?
Enter or paste your settings and CSS Clip Path Generator updates the result as you go. When it looks right, copy or download it with one click.
Does CSS Clip Path Generator work on phones and tablets?
Yes. CSS Clip Path Generator is responsive and works in any modern browser on mobile, tablet, and desktop.
Which browsers does CSS Clip Path Generator support?
It works in current versions of Chrome, Firefox, Safari, and Edge. For the best experience, keep your browser up to date.
Is there a limit on how often I can use CSS Clip Path Generator?
No. You can use CSS Clip Path Generator as many times as you need, at no cost.
Can I use CSS Clip Path Generator for commercial or client work?
Yes. You are free to use the output in personal, educational, and commercial projects.
Why is CSS Clip Path Generator free?
The site is supported by advertising, which lets us keep every tool free and open to everyone.
What should I do if CSS Clip Path Generator gives an unexpected result?
First check that your settings is formatted as expected. If something still looks wrong, use the feedback link on the page and we will take a look.