Apps / CSS Generators / Clip-Path Generator
CSS Clip-Path Generator
Build a CSS clip-path value visually. Drag the handles to reshape polygons; tweak sliders for inset / circle / ellipse modes.
Drag points to reshape. Double-click a point to delete it (min 3). Use the buttons below to add midpoints.
Points (5)
- 050% × 0%
- 1100% × 38%
- 282% × 100%
- 318% × 100%
- 40% × 38%
Presets
CSS value
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);What is this?
A free CSS clip-path generator. Build polygon, inset, circle, or ellipse clip-paths visually by dragging handles on a live preview, then copy theclip-path value.
Polygon mode tips
- Drag a point to move it.
- Double-click a point to delete it (minimum 3 points).
- Use the + button on a row to insert a midpoint after that point.
- Pick a preset (Pentagon, Triangle, Trapezoid, Arrow, Star) as a starting shape.
When to use which shape
- Polygon — angular shapes (arrows, chevrons, custom cut-outs).
- Inset — rounded-corner rectangles; like border-radius but with full per-side control.
- Circle / Ellipse — round avatars, vignette masks, hotspots.
FAQ
Does clip-path affect hit-testing?
Yes — clipped-out pixels are no longer hoverable / clickable. That makes clip-path a clean way to build non-rectangular buttons or interactive areas.
Browser support?
Excellent across all evergreen browsers. Safari historically needed
-webkit-clip-path; this tool outputs the unprefixed form (modern Safari accepts it).