CSS Clip-Path Polygon Generator & Visual Editor

Start from a shape preset, drag the points or type their X and Y percentages, and copy the generated clip-path. The preview applies the same declarations you copy.

Runs locally in your browser

View category: Frontend & Design (34)

· clip-path · polygon() · draggable points

CONTROL RACK

LIVE STAGE

VoriTools

EXPORT CSS

How to build a polygon clip-path and copy the CSS

The editor works on one polygon() shape and writes the two declarations a stylesheet needs: the prefixed -webkit-clip-path line and the standard clip-path line. Five presets cover the common shapes — Triangle with 3 points, Diamond with 4, Hexagon with 6 (the default), Star with 10 and Chevron with 6 — and every point can be moved by dragging its handle on the board or by typing an X and Y percentage.

The stage is a live preview of that same CSS: the polygon is applied to the preview element while you drag, and the readout in its header counts the points. The coordinates are percentages of the element’s own box, so a shape keeps its proportions when it is applied to an element of a different size.

Pick a shape in the Preset selector. Hexagon loads on every visit; Triangle, Diamond, Star and Chevron replace the current shape with their own points, and the Active point selector moves back to point 1.

Move the active point by dragging its handle on the board, or by typing into X position (%) and Y position (%). Both routes write the same value, the fields follow the handle while you drag, and any edit leaves the Preset selector on its Custom entry.

Add point inserts a new point halfway between the active point and the next one and makes it active; Remove point deletes the active point. A polygon holds between 3 and 12 points, and the status line says so when you reach either end.

Coordinates are clamped to 0–100 and rounded to one decimal place when you leave the field or press Enter: 150 becomes 100, -5 becomes 0 and 12.34 becomes 12.3. An emptied field keeps the value the point already had instead of dropping it to the edge.

Press Copy CSS to take the block from the code panel, and Reset to return to the Hexagon preset — the quickest way back to a known shape.

What the generator writes, and what stays with you

What the copied CSS contains

The block holds one rule: .clipped-element with a -webkit-clip-path line and a clip-path line, both carrying the same polygon() value built from comma-separated x y percentage pairs. Nothing else is written — no prefix beyond -webkit-, no CSS custom properties and no selector for your own markup, so rename .clipped-element to the class you actually use.

The pairs are percentages of the reference box, which is the border box for an element that does not override it. The shape therefore scales with the element and does not depend on the pixel size of the preview board.

Where browser support matters

The preview shows what the browser you are using does with the value; the page carries no compatibility table and does not detect support. Basic polygon() clipping works in current Chrome, Edge, Firefox and Safari, and the -webkit- line keeps older iOS and Safari builds working, but check the engines your audience uses before the shape carries meaning — a browser without support paints the whole box.

The clip is not only visual: a click outside the polygon does not land on the element, which matters when the clipped element is a link or a button and its target area has to match what is on screen.

Points, limits and the local workbench

A polygon needs three points and accepts twelve. Add point splits the edge after the active point, Remove point deletes the active one, and the status line reports both limits in the language of the page. The Active point list follows creation order, which is also the order of the pairs inside polygon().

Everything runs inside the page: the shape is computed by the browser, no value is uploaded, and the tool keeps working with the network disconnected. The preview element is styled with the declaration the code panel shows, so there is no second implementation that could disagree with the CSS you copy.