CSS Clip-Path & Polygon Shape Generator

Visually drag polygon anchor points to create modern CSS clip-path geometric shapes.

Presets:

Theme:

Standard CSS Rule:

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

Tailwind CSS Arbitrary Value:

[clip-path:polygon(50%_0%,100%_25%,100%_75%,50%_100%,0%_75%,0%_25%)]

Vertex Coordinate Points:

P1:50%, 0%

P2:100%, 25%

P3:100%, 75%

P4:50%, 100%

P5:0%, 75%

P6:0%, 25%