Clip path
7 nodes
Tap the + between two nodes to add one. Drag a node to move it. Backspace or Delete removes the focused node (minimum 3). Arrow keys nudge it ±1%, Shift+Arrow ±5%.
Copy clip-path CSS copies the responsive % polygon; Copy snippet adds the -webkit- prefix for older Safari.
Copy path() is an advanced, fixed 400×400px export — it does not scale with the element. Prefer the polygon exports above unless you need the exact curve at that one size.
What is a clip-path?
clip-path cuts a shape out of an element, hiding everything outside it while leaving the
element's own size and layout untouched — the same effect an image editor's clipping mask gives you, but
as one line of CSS. This clip-path polygon generator lets you drag nodes directly on a live stage instead
of hand-typing coordinates, then copies the result as a percentage polygon() that scales with
the element wherever you paste it — a hero image cropped to a chevron, an avatar cut into a blob, a badge
shaped like a speech bubble.
How to build your shape
- Open a preset in the Shape drawer, or start from the default and edit it — drag any node to move it.
- Tap the + marker between two nodes to insert one there; select a node and press Backspace to remove it.
- Toggle Curve to Smooth for rounded edges, or Sharp for hard corners; Detail sets how fine the curve is.
- Drop your own image into the Shape drawer for a clip-path from image, or keep the built-in mesh backdrop.
- Copy clip-path CSS for the polygon alone, Copy snippet for the -webkit- prefixed paste-ready rule, or the advanced Copy path() export.
Design tips for a cleaner clip-path
Fewer nodes read as a crisper shape once flattened to a small size — a 6-to-10-point ring usually looks
more deliberate than a 30-point one, even with Smooth turned on. Reach for the advanced path()
export only when you need the exact curve at one specific pixel size; for everything else the responsive
percentage polygon() above it is the one to paste, since it keeps working as the element
resizes. Need a clip path generator with border radius instead of a jagged edge? Skip hand-placing corner
nodes — the Inset rounded preset already traces each corner along a real arc and exports the same
responsive polygon as any other shape here.
Where to use clip-path shapes
A chevron or arrow clip-path reads well on a call-to-action button or a section divider; a star or blob
suits a badge, sticker, or profile photo; a message-bubble shape fits a testimonial or chat UI; the
rounded-inset preset covers the plain "just give this a nicer corner radius" case a plain
border-radius can't reach on a non-rectangular crop. Every shape clips a live mesh gradient
by default, but the same polygon works identically the moment you drop your own photo in — clip-path from
image and clip-path from a generated backdrop are exactly the same CSS property, just a different
background underneath it.
Frequently asked questions
How do I make a responsive clip-path?
Leave Curve set to Smooth (or use any preset as-is) and this clip path generator exports a percentage polygon() — every vertex is an x%/y% pair, so the shape scales with the element automatically. That is the default, recommended export. The path() button exists only for the one case a percentage polygon cannot cover: an exact curve at one fixed pixel size.
What's the difference between polygon() and path() clip-path?
polygon() lists straight-line vertices as percentages, so it always scales with the box — this is what Copy clip-path CSS and Copy snippet give you. path() takes real SVG path syntax (including curves), but only at one fixed pixel reference box baked into the string, so it never scales. Use polygon() unless you specifically need the exact curve at that one size.
Can I clip an image with a custom shape?
Yes — drop your own image into the Shape drawer (drag-and-drop, click to browse, or paste), and this clip-path generator from image cuts your polygon or preset shape out of it live on the stage. The checkerboard behind the shape shows exactly what's been clipped away, the same way any design tool visualizes transparency.
How do I add border-radius to a clip-path?
clip-path has no border-radius property of its own, so a clip path generator with border radius has to build the rounded corners into the polygon itself. Open Presets and pick Inset rounded — it's a rectangle with each corner traced along a real quarter-circle arc, not an approximation, and it exports as a normal responsive polygon() like every other shape here.
Why do I need the -webkit-clip-path prefix?
Older Safari and WebKit-based browsers only recognize the vendor-prefixed -webkit-clip-path property, not the unprefixed clip-path. Copy clip-path CSS gives you the modern property alone; Copy snippet gives you both declarations in one paste-ready rule, so the shape still renders correctly on a browser that has not caught up yet.
How do I create a chevron or arrow shape with clip-path?
Open the Shape drawer and click the Chevron or Arrow preset — each is a hand-tuned polygon(), applied instantly and ready to copy. Want something between the two presets? Tap a preset to start, then drag its nodes, tap an edge's + to add a vertex, or press Backspace to remove one until the shape matches what you need.
Does my image get uploaded when I clip it?
No. A dropped image is turned into a local, in-browser object URL and never leaves your device — this clip-path generator has no server to upload it to. That URL only lives for this browser session, so it is never written into a saved design or a share link; reopening one falls back to the mesh backdrop instead.