CSS Clip Path Generator
Pick a preset shape or drag points on the canvas to build a custom clip-path, then copy the finished CSS.
Runs entirely in your browser, nothing is uploadedDrag any point on the preview to fine tune the shape.
Build a clip path in three steps
- Start from a preset shape, triangle, hexagon, arrow, and more are all one click away.
- Drag any point on the preview canvas to reshape it exactly how you want.
- Copy the generated clip-path CSS and paste it onto any element's style.
Why people use the CSS Clip Path Generator
Everything worth knowing before you dive in.
How it helps
The CSS clip-path property can cut an element into striking shapes, banners, angled section dividers, badge callouts, but writing the polygon coordinates by hand means guessing percentages and reloading the browser to check. This tool puts a draggable canvas in front of every point, so the shape and the code stay in sync as you work.
Built for real use
Presets cover the shapes that come up most often, triangles, hexagons, arrows, and speech bubble style callouts, each a starting point you can then drag into something more specific. Every point on the canvas maps directly to a percentage pair in the generated polygon, so the CSS output always matches exactly what's on screen.
Private by default
The result is a plain clip-path value ready to paste onto any element, no build step or preprocessor required, and it works well paired with a background image or gradient for eye catching section dividers.
Pro tip
Keep the number of points reasonable, somewhere between four and eight, since very complex shapes with dozens of points get harder to fine tune by dragging and rarely add visual value.
Common questions
Does clip-path work in all browsers?
Yes, clip-path with polygon values is supported in all modern browsers without a vendor prefix.
Can I animate a clip-path shape?
Yes, clip-path can be transitioned or animated with CSS as long as both shapes use the same number of points.
Why does my clipped content lose its box shadow?
Clip-path cuts the element strictly to the shape's outline, including any shadow, so a shadow effect usually needs to sit on a wrapping element instead.