Toolgeist › Design

CSS Clip-Path Generator — Visual Shape Editor, Live Preview

Drag points directly on a live image or box preview to build a CSS clip-path shape — polygon, circle, ellipse, inset — instead of guessing coordinate percentages by hand, then copy the exact generated clip-path CSS.

How to use CSS Clip Path

1. Choose a shape type — polygon, circle, ellipse, inset.
2. Drag points on the live preview to adjust the shape.
3. Preview the clipped result.
4. Copy the generated CSS.

Frequently asked questions

What does clip-path actually do?

It hides everything outside a defined shape, revealing only the region inside — used for cropping an image into a non-rectangular shape or creating angled section dividers without an actual image mask.

Can I animate between two clip-path shapes?

Transitioning between two polygon clip-paths with the same number of points animates smoothly in CSS; shapes with a different point count need matching first.

Does clip-path work in all modern browsers?

Yes — clip-path has broad support across all current major browsers for the common shape functions.

Related Design tools

• Border Gen
• CSS Ribbon
• Text Stroke
• Polygon Gen
• Contrast Matrix
• Mesh Gradient Pro

Also searched for: css clip path generator visual · clip-path polygon maker online · css shape clipping tool

Browse all 738 free tools on Toolgeist →