clip-path: polygon() is a CSS property that allows you to visually cut
any HTML element into custom geometric shapes. Instead of rectangles,
you can create triangles, diamonds, zig-zags, waves, badges, and
completely custom UI shapes using percentage-based points.
This tool generates accurate, production-ready polygon coordinates
that work smoothly across modern browsers.
Understanding Points & Movement
Each red dot represents a polygon vertex. When you move a point,
you are changing the shape of the clipped element in real-time.
X value → horizontal position (0% to 100%)
Y value → vertical position (0% to 100%)
Points connect in order to form a closed shape
The shape updates instantly without lag because calculations are done
using percentages, not pixels.
Grid Mode – Precision Design
When Grid Mode is enabled, the canvas shows a structured layout that
helps align points symmetrically. This is useful for:
Perfect diamonds and hexagons
UI cards with balanced edges
Consistent design systems
Grid mode is visual only and does not affect performance.
Snap Mode – Clean Geometry
Snap Mode forces points to align to grid intersections. This ensures
clean angles and avoids uneven decimal values in generated CSS.
Recommended when creating shapes for:
Buttons & cards
Hero section backgrounds
Reusable UI components
Straight Move Mode – Axis Locking
Straight Move Mode intelligently locks movement to a single axis
(horizontal or vertical). This allows you to adjust shapes without
distorting alignment.
Move only X or Y direction
Perfect vertical & horizontal edges
Zero accidental diagonal movement
CSS Output Explained
The generated CSS uses percentage-based coordinates, making it:
Responsive by default
Resolution independent
Safe for animations and transitions
You can directly paste the output into any CSS file without modification.
SVG Output Explained
SVG output is useful when you need:
Vector graphics
Masking inside SVG elements
Design-tool compatibility
The SVG uses the same coordinates as the CSS polygon for accuracy.