01
Start with a reversible preset
Choosing a new preset first opens a preview showing how many current points it will replace; Apply commits it and Undo restores your custom outline.
HTML and CSS tools
CSS clip-path generatordrag, preview, export
Drag polygon vertices or tune a basic shape, then inspect the generated CSS declaration.
CSS clip-path generator
Shape preview
CSS result
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);Shape coordinates and CSS are generated locally in your browser.
CSS ready to copy.
A CSS clip-path generator helps when a straight rectangle cannot frame a badge, photo, or decorative section. Start with a hexagon, then move its points until the cut follows your design.
This CSS clip-path generator keeps polygon editing visual while showing the exact declaration you will paste into your stylesheet. It also covers circle, ellipse, and inset without turning them into fake polygons.
Why use this CSS clip-path generator
See the cut while editing coordinates, before pasting anything into a project.
Move a vertex and see the cut
Drag any polygon point and watch the edge move against a patterned background. A point can also be selected and adjusted numerically, so the polygon clip-path editor stays useful for precise work.
Switch units without shifting the shape
The same six points can be emitted as percentages or as pixels measured against a 320 × 320 reference box. The clip path maker keeps the preview fixed as you compare both outputs.
From preset to reusable CSS
02
Refine points and units
Click an edge marker to insert a midpoint. Select a vertex for X and Y fields, or drag it. Percentages scale with an element; px values use the stated 320 px box.
03
Export only a fresh result
The automatic switch generates after a short pause. Turn it off to use Generate CSS or Ctrl/Cmd + Enter; copy and download stay disabled while the displayed code is stale.
Shape controls and export
Four CSS basic shapes
Use polygon, circle, ellipse, or inset directly. Radius, center, edge offsets, and corner radius have their own controls.
Polygon point editing
Add a point on an edge, drag it, set exact coordinates, or preview deletion. A polygon always keeps at least three vertices.
Presets that you can undo
Triangle, diamond, hexagon, star, and arrow give a head start; confirmation prevents a preset from silently replacing your custom work.
Readable CSS output
This CSS shape generator produces a standard clip-path declaration that you can copy or download as a CSS file.
What the generated declaration means
- Pixels have a fixed reference
- Polygon px coordinates are calculated for 320 × 320 px. Use percentages for an outline that scales with another element size; mixed units inside one polygon are unsupported.
- Basic shapes only
- The clip-path polygon generator does not parse existing CSS or edit path(), shape(), or SVG url() clipping references. Its code panel is generated output, not a source editor.
- Clipping does not resize layout
- The element keeps its original layout box. Its own box-shadow can be cut away with the paint; place shadow on a wrapper if you need it visible.
- No image or animation output
- This tool creates CSS, not a cropped PNG, SVG file, or hover transition. Polygon transitions need compatible point counts at both ends.
CSS clip-path generator FAQ
Can I drag points to reshape a clip-path polygon?
Yes. Drag a visible vertex to reshape the polygon; the preview changes immediately. After a short pause, the CSS clip-path generator refreshes its declaration.
How do I add or remove polygon points?
Select an edge marker or Add point to insert a midpoint. Select a vertex and choose Remove point to preview deleting one. Three points is the minimum.
Do I need the -webkit-clip-path prefix?
This tool outputs the standard clip-path property only. If your project targets an engine that needs the prefixed spelling, add that declaration in your stylesheet after checking your support requirements.
Why is my box-shadow cut off by clip-path?
clip-path masks the element’s own paint, including its box-shadow. To keep a visible shadow, apply the shadow to a surrounding wrapper instead.
Can clip-path polygons have rounded corners?
polygon() draws straight segments between points. For a circle or ellipse use those shape modes; an arbitrary rounded polygon curve requires a different path-based approach.
Found a shape or coordinate edge case?
Use the CSS clip-path generator now
Try a preset, drag its points, and export a declaration that matches the live preview.
Keep this CSS clip-path generator handy when the next design calls for a custom polygon or simple geometric crop.
Generated in your browser.