CSS Clip-Path Generator
NewVisually build CSS clip-path shapes with draggable points and live preview.
Shape preset
Choose a polygon, then drag any handle directly on the preview.
Canvas styling
Drag the circular handles to fine-tune point positions. Edited shapes are stored as your current custom polygon.
Preview
Generated CSS
Frequently Asked Questions
Can I drag the shape points, or am I limited to presets?
You can do both. The tool starts from a preset, then renders draggable handles directly on the preview so you can reposition each polygon point manually.
Which presets are built in?
It includes triangle, trapezoid, parallelogram, pentagon, hexagon, octagon, star, cross, and a message/speech-bubble shape, plus a custom mode.
What happens if I tweak a preset by dragging one point?
As soon as you drag a handle, the tool stores that edited polygon as your current custom shape and switches the preset dropdown to `custom`. Reset returns you to the last non-custom preset selection.
Does the generated CSS include the WebKit-prefixed version too?
Yes. The output textarea includes both `clip-path:` and `-webkit-clip-path:` for the same polygon value.
Can this generate `circle()`, `inset()`, or `path()` clip-path values?
No. This generator is polygon-only; everything in the UI is based on percentage point coordinates that become a `polygon(...)` value.