clip-path Shape Maker
Drag polygon points over a live shape (or your own photo) to craft a CSS clip-path — polygon, circle, ellipse and inset — then copy the code.
💡 Click an edge to add a point · drag the dots to shape it · select one and use arrow keys or Delete.
Percentages are relative to the element's box. Paste both lines into your CSS rule for the widest browser support.
Paste any %-based polygon(), circle(), ellipse() or inset() and its handles appear on the stage.
🔒 100% in your browser — any image you load never leaves this page and nothing is uploaded. Drag vertices over your own photo and watch the cut update live.
Why you’ll love clip-path Shape Maker
Instant & free
No signup, no paywall, no limits — clip-path Shape Maker works the moment the page loads.
Completely private
Everything runs in your browser. Nothing you enter is ever uploaded or stored on a server.
Works on any device
Fully responsive and touch-friendly — use it on your phone, tablet or desktop.
Copy & export
Grab the CSS, SVG or a PNG in one click and drop it into your project.
How to use it
Open it
No download and no login — the tool is ready right at the top of this page.
Use it
Enter your details or start interacting. Everything updates live as you go.
Get your result
Copy, download or share your result in a single tap. That’s it.
About clip-path Shape Maker
CSS clip-path crops an element to a shape without touching the underlying image — the browser simply hides everything outside the region you define. The property accepts four basic shape functions, and this editor covers all of them: polygon() for arbitrary straight-edged shapes, circle(), ellipse(), and inset() for rectangular crops with optional rounded corners. Instead of hand-typing coordinate lists, you drag handles on a live stage and the CSS updates as you move.
Polygon mode is the deepest: start from one of 14 presets (triangle through star, arrow, chevron, cross and frame), click any dashed edge to insert a new vertex exactly where you clicked, drag the dots, nudge a selected point with arrow keys (Shift jumps 5%), or type precise X/Y percentages. Flip horizontal, flip vertical and reset are one tap each. A ghost overlay shows the part of the element being clipped away, and you can preview the cut on a gradient, a checkerboard, or a photo you upload — which never leaves your browser.
The output panel always shows two lines, clip-path and -webkit-clip-path, ready to copy together. Because every coordinate is a percentage of the element's own box, the same rule scales with responsive layouts; the 1:1 and 16:9 stage toggle lets you edit at the aspect ratio your real element will have, so the shape lands exactly as designed.
Popular uses
Frequently asked questions
Older Safari and iOS WebKit versions only recognised the -webkit- prefixed form. Every current browser reads the unprefixed property, but shipping both lines is free insurance for visitors on older devices — modern browsers simply ignore the duplicate. The copy button grabs both lines at once.
Percentages resolve against the element's own box, so one rule works at any size — the clip scales with your responsive layout. The one catch: if your real element has a different aspect ratio than the editing stage, the shape will stretch with it. Use the 1:1 / 16:9 toggle to edit at the ratio your element actually uses.
Click anywhere on a dashed edge to insert a vertex at that exact spot and start dragging it immediately, or use the Add point button, which inserts one at the midpoint of the longest edge (easier on touch screens). To remove a point, select its dot and press Delete, or tap the red × — a polygon always keeps at least three points.
Layout is unaffected — the element still occupies its full original box, so surrounding content does not reflow. Hit-testing does change, though: clicks and hovers on the clipped-away area pass through to whatever sits underneath, which is usually what you want for decorative shapes.
Yes — upload a photo (up to 20 MB) and it becomes the stage backdrop, so you drag vertices directly over the pixels you want to keep. The file is loaded as a local object URL and is never uploaded to any server; refreshing the page discards it.
clip-path Shape Maker is 100% free — no signup, no watermarks and no usage limits. It’s one of 200+ free tools we build and give away.
Yes — copy the code or download the image and use it freely in personal and commercial projects.
More Design & Visual Tools
From our collection of 317 free tools.
People also use
We built this. We can build yours.
clip-path Shape Maker is one of 200+ free tools from Workaholic Developers — a software & AI studio. Need a website, app, AI agent or automation? Let’s talk.
🇮🇳 Built by Workaholic Developers
We built this little toy in days. Imagine what we’ll build for you.
AI agents, web apps, automation, custom tools — designed and engineered fast, on whatever tech fits the job. If you can describe it, we can build it.