Share
Design polygon clip-path shapes with a visual editor.
Drag points to design
Preview
CSS
clip-path: polygon(50.0% 0.0%, 100.0% 25.0%, 100.0% 75.0%, 50.0% 100.0%, 0.0% 75.0%, 0.0% 25.0%);
Create interesting CSS clip-path shapes with a visual editor. Choose from 18 preset polygons (triangle, hexagon, star, chevron, arrow, message bubble, etc.) or drag points on a live grid to design your own. Copy the resulting clip-path CSS instantly.
Share this tool
