CSS Clip Path Polygon Generator
Build a CSS polygon clip-path from percentage point pairs, preview the clipped shape and copy the generated CSS.
Start with your input
Edit the example or replace it with your own text.
Choose your options
These settings are optional. Keep the defaults to get started.
How to use CSS Clip Path Polygon Generator
- Enter 3–20 coordinate pairs as JSON, using percentages from 0 to 100.
- Generate the shape to inspect point order and clipping.
- Copy the clip-path rule and adapt the element’s dimensions in your layout.
Describe a polygon in the element’s own coordinate space
Each pair is horizontal and vertical percentage. Points are connected in order and the last point closes back to the first. Percentages scale with the element, so a polygon can appear different on a wide rectangle and a square. Reordering points changes the path and may create self-intersections.
Clipping does not change document layout dimensions
The element still occupies its original rectangular layout box. Clip-path controls which painted region remains visible; it does not wrap neighboring text around the polygon. This generator validates numeric bounds and a minimum of three distinct points, but it does not infer a simple non-self-intersecting geometry or add browser-specific fallback images.
Example input
[[0,0],[100,0],[80,100],[20,100]]
Does clip-path resize the layout box to the visible shape?
No. It clips painting while the element keeps its normal layout size.
Is input uploaded?
Processing takes place in your browser. This tool does not send your input or selected files to a conversion API.