✂️CSS Clip-Path Generator
Instructions: Drag handles to edit. Click empty space to add points. Double-click a point to remove it.
Shape your website's content with our advanced CSS Clip-Path Generator. Go beyond standard presets by creating fully custom shapes directly in your browser. Add, move, and remove points on an interactive canvas to sculpt your image or container. The tool supports standard `polygon()` for responsive, straight-edged shapes, and offers a 'Curved' mode that generates `path()` values for smoother, organic outlines. Instantly preview the result on your own images and copy the CSS code.
Frequently Asked Questions
How do I add a new point?
Simply click anywhere on the path or in the empty space within the editor area. The tool will intelligently add a new point to the nearest line segment.
How do I remove a point?
Double-click on any existing white handle (point) to remove it. Note that a shape must have at least 3 points.
Why does the 'Curved' mode output `path()` instead of `polygon()`?
The CSS `polygon()` function only supports straight lines. To create curves, CSS requires the `path()` function, which uses SVG path syntax. Note that `path()` values in CSS are pixel-based and may not be as responsive as percentage-based polygons without additional CSS scaling techniques.
