Skip to content
Lizely

CSS Clip Path Generator

Create and edit percentage-based CSS polygon clips with live presets and validated coordinate pairs.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Choose the preset closest to the shape you need.
  2. 2.Edit comma-separated x% y% coordinate pairs in drawing order.
  3. 3.Check the preview at the intended element aspect ratio.
  4. 4.Copy the declaration and test layout, focus, and responsive behavior.

About CSS Clip Path Generator

CSS Clip Path Generator makes polygon clipping visible and editable. Select a triangle, diamond, pentagon, hexagon, star, chevron, message bubble, or parallelogram preset, then adjust the coordinate list directly. Every point contains an x percentage followed by a y percentage. The preview applies the generated polygon() value to a real block, and the output provides a complete clip-path declaration ready for a stylesheet or inline style. Because coordinates are relative to the element's reference box, the same percentage polygon can scale with different widths and heights.

Polygon points are read in order. The browser draws a straight segment from the first point to the second, continues through the list, and closes the last point back to the first. Changing the order can create a different outline even when the same coordinates are present. Concave shapes such as the star or chevron deliberately fold inward. Self-intersecting polygons can have surprising fill results, so the tool validates syntax and bounds but does not claim every point order is visually useful. Presets provide stable starting arrangements that you can refine rather than building every shape from an empty list.

Each coordinate must use two percentage values, such as 50% 0%. Commas separate vertices. Percentages are limited from zero through one hundred in this generator, keeping points inside the reference box even though CSS can represent positions outside it. At least three points are needed for an area, and the editor allows no more than twenty to keep interaction and output manageable. Decimal percentages are accepted and normalized. Missing percent signs, negative values, values above one hundred, empty list entries, and malformed pairs produce a focused error instead of partial CSS.

The clip-path property controls which part of an element is painted. Content outside the clipping region is hidden, but clipping is not a layout tool: surrounding elements still use the original rectangular box. A clipped corner can also reduce the visible or interactive area. Do not clip away essential text, keyboard focus indicators, or touch targets. For images, preserve meaningful alternative text. For controls, test pointer and keyboard behavior carefully and avoid using a decorative silhouette as the only signal of purpose.

Percentage coordinates refer to the chosen geometry reference; with a basic clip-path and no explicit geometry box, the border box is normally used. A square preview can make a star look balanced while the same points on a wide rectangle appear stretched. Test copied CSS at the actual aspect ratio and across responsive breakpoints. Animating between polygons generally works best when both shapes have the same number of vertices in compatible order. This generator does not create SVG paths, curve commands, circles, ellipses, inset shapes, or vendor-specific fallbacks. It focuses on the widely useful numeric polygon form.

Generation is fully client-side. Points are not uploaded or retained, and no dependency is added. Start with the closest preset, make one coordinate change at a time, and watch the preview. Copy the declaration only after the shape remains readable at its intended sizes. Check browser support required by your audience, provide a sensible rectangular fallback when the silhouette is nonessential, and remember that a visually clipped image still downloads at its original dimensions. The tool helps serialize a valid polygon; design quality, accessibility, performance, and content safety still require testing in the final page.

Methodology & sources

Parses 3–20 comma-separated percentage coordinate pairs, validates each x and y within 0–100, normalizes decimal values, serializes polygon() in vertex order, and uses that exact value for the live preview.

Frequently asked questions

Why does the browser connect the last point to the first?
CSS polygon shapes are closed automatically, so the final vertex is joined back to the starting vertex.
Why does my shape stretch on another element?
Percentage coordinates scale with the reference box. A different width-to-height ratio changes the visible proportions.
Does clipping change page layout?
No. The element keeps its original rectangular layout box even though pixels outside the clipping region are hidden.

Related tools

Developer Tools guides

View all