Tool Reign
Developer

CSS Clip Path Generator — Visual Shape Editor

Create polygon, circle, ellipse, and inset clip-path shapes visually. Drag handles, select shape presets, and copy CSS clip-path code instantly.

Polygon EditorShape PresetsLive PreviewFree

Presets

Live Preview (click to add point)

Points (3)

1%%
2%%
3%%

CSS Output

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

Related Tools

More free utilities you might find useful

⬜
Border Radius Generator
Rounded corners
🌑
Box Shadow Generator
CSS shadows
🌈
CSS Gradient Generator
Gradient builder

Frequently Asked Questions

Quick answers to common questions

What is CSS clip-path and what can it do?+

clip-path defines the visible area of an element — everything outside is hidden. Creates non-rectangular shapes: triangles, hexagons, stars, diagonals. Unlike border-radius, supports any polygon.

How do I create a triangle with CSS clip-path?+

Pointing up: clip-path: polygon(50% 0%, 0% 100%, 100% 100%); Right: polygon(0 0, 100% 50%, 0 100%); Down: polygon(0 0, 100% 0, 50% 100%).

Can CSS clip-path be animated?+

Yes — when both states use the same shape type with the same number of points. transition: clip-path 0.3s ease works for hover effects.