|
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, an SVG, or a PNG
Pick one of the 16 polygon presets, click Import SVG to convert a vector path into percentage points, or use Trace PNG to have a transparent image's outline turned into a shape with adjustable detail.
02
Reshape it point by point
Drag any blue handle to move a point, click a small + dot between two points to insert a new one, Alt-click a point to delete it, and press Undo to step backward.
03
Copy the value or the full CSS
The preview updates live on the demo gradient or your own image. Use Copy value for the bare clip-path, or Copy full CSS for a class with the -webkit-clip-path fallback 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
How many presets does the clip path generator include?
Sixteen, covering the shapes people actually ship: triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, bevel, star, two arrows, chevron, message bubble, cross, close mark, and frame. Each one loads as an editable polygon, so a preset is a starting point rather than a fixed choice.
Can the css clip path maker trace a shape from a PNG logo?
Yes. Upload a PNG through Trace PNG and the tool reads the alpha channel, finds the outline of the largest solid region, and simplifies it into polygon points. Transparent backgrounds trace best. A detail slider appears afterward so you can trade point count against fidelity.
What happens when I import an SVG into this tool?
It samples 120 points along the SVG path, normalizes them to percentages, and simplifies the result into a responsive polygon you can edit. The raw path data is kept too, so a path() tab appears if you want the pixel-exact original.
Why does the copied clip-path CSS include a -webkit- prefix?
Older Safari versions only understood -webkit-clip-path, so the Copy full CSS button writes both the prefixed and standard declarations. Modern browsers ignore the extra line, and legacy Safari users still get the shape. It costs one line and saves a support ticket.
Do clicks pass through the cut-away parts of a clip-path shape?
Yes. The element's hit area follows the clipped shape, so anything outside the polygon lets clicks fall through to whatever sits behind. That's exactly what you want for arrow-shaped buttons or overlapping angled cards.
Is a clip path polygon generator output responsive by default?
When the coordinates are percentages, yes, and that's what this tool emits for polygons. A point at 50% 0% stays at the top center whether the element is 200px or 2000px wide. Only the path() mode is pixel-based, which is why the polygon conversion exists.
Which clip-path modes have slider controls instead of draggable points?
Circle, Ellipse, and Inset. Circle exposes radius and center position, Ellipse adds separate X and Y radii, and Inset gives you top, right, bottom, and left percentages plus an optional corner radius in pixels. All values update the CSS output as you drag.