CSS Clip-Path Generator
Pick a preset shape or drag points to design a custom polygon, preview it live, and copy the clip-path CSS.
Drag the white handles to customize the shape. Click the preview edge to add a point (custom mode only).
What is CSS clip-path?
The clip-path property lets you show only a specific region of an element — a polygon, circle, ellipse or inset rectangle — hiding everything outside it. It's a pure-CSS way to create angled sections, badges, cropped images and decorative shapes without extra markup or images.
How to use this tool
- Click a preset shape to apply it instantly, or switch to Custom and drag points to design your own polygon.
- Watch the live preview update as you drag.
- Copy the generated CSS and paste it onto any element — background/gradient is only for previewing the shape.
Frequently Asked Questions
Does clip-path work in all browsers?
Yes, clip-path with polygon/circle/ellipse/inset values is supported in all modern browsers (Chrome, Firefox, Safari, Edge). Legacy Internet Explorer does not support it.
Does clip-path affect layout or just visuals?
It's purely visual — the element's box model, layout size, and click/hit area outside the visible shape are unaffected unless you also adjust pointer-events.
Can I animate clip-path?
Yes, as long as both the start and end polygon() values have the same number of points, browsers will smoothly interpolate between them in a CSS transition.