How do I drag the polygon points?

Select the Polygon shape type, then hover over any white dot handle on the preview and drag it to a new position. The CSS output updates instantly.

Can I add or remove polygon points?

Yes - click 'Add Point' to insert a new point at 50%,50% (then drag it into place). Click the trash icon next to a point row to remove it. Polygons must have at least 3 points.

What is the inset shape?

Inset clips a rectangle from inside the element. You control the top/right/bottom/left margins and optionally round the corners. It's great for creating framed or letterbox effects.

Does clip-path affect layout?

No - clip-path visually hides parts of the element but does not change its box model. Margins and padding remain the same; only the visible area changes.

/ developer tools

CSS Clip Path Generator

Live

Points (drag in preview)

Point 1X:% Y:%

Point 2X:% Y:%

Point 3X:% Y:%

Preview background

CSS Output

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Privacy First: Your files are processed securely. Whenever possible, processing happens in your browser and files are never stored on our servers.

Create complex CSS clip-path declarations without writing coordinates by hand. Four shape types: Polygon (drag control points on the preview), Circle (radius + center X/Y), Ellipse (rx/ry + center), Inset (top/right/bottom/left + optional round). 9 polygon presets: Triangle, Diamond, Pentagon, Hexagon, Star, Arrow, Chevron, Message bubble, Cross. Change the preview background between gradient, solid colors, and image. Live CSS output.

How to Use

1Select the shape type: Polygon, Circle, Ellipse, or Inset
2For Polygon: click a preset like Triangle or Star, then drag the white handles in the preview to fine-tune
3For Circle/Ellipse: use the sliders to set radius and center position
4For Inset: drag the four margin sliders and optionally add corner rounding
5Click 'Copy CSS' to copy the clip-path declaration

Features

4 shape types: Polygon, Circle, Ellipse, Inset
Polygon: drag white handle dots on the preview to reposition points
Add / remove polygon points dynamically (minimum 3)
9 polygon presets: Triangle, Diamond, Pentagon, Hexagon, Star, Arrow Right, Chevron, Message bubble, Cross
Circle: radius + center X/Y sliders
Ellipse: Rx/Ry + center X/Y sliders
Inset: Top/Right/Bottom/Left margins + corner round (px)
Preview background: gradient, solid colors
Live clip-path CSS output with one-click copy
100% browser-based

CSS Clip Path Generator

How to Use

Features

Frequently Asked Questions

/ related tools

Community Feedback

Reviews

Rate & Review

/ share this tool