A clip path generator for beginners creates a CSS polygon() declaration from percentage-based x/y points that you can paste into a stylesheet or inline style.
The CSS Clip Path Generator provides a practical route from a basic preset to an editable polygon and a copy-ready declaration. Generation is fully client-side, so the points are not uploaded or retained, and no dependency is added to your project.
The rules that control every polygon
A polygon clip defines which part of an element remains painted. Each vertex uses two percentages: an x percentage for horizontal position and a y percentage for vertical position. The browser connects consecutive vertices with straight lines and automatically closes the final point back to the first.
Percentages make the result relative to an element's reference box rather than fixed pixels. With a basic clip-path and no explicit geometry box, the border box is normally used. That makes percentage polygons convenient for responsive layouts, but their visible proportions can change when the element's width-to-height ratio changes.
| Input | Accepted format | Practical effect |
|---|---|---|
| Starting shape | Triangle, diamond, pentagon, hexagon, star, chevron, message bubble, or parallelogram | Provides a stable polygon arrangement that you can refine. |
| Vertex | One x% followed by one y% | Places the point horizontally and vertically within the reference box. |
| Point count | 3–20 points | Provides enough vertices for an area while keeping the editor and output manageable. |
| Percentage range | 0%–100% | Keeps every point inside the generator's reference box. |
| Decimal values | Accepted and normalized | Allows finer coordinate adjustments. |
| Invalid entries | Focused error for malformed input | Missing percent signs, negative values, values above 100%, empty entries, and malformed pairs do not produce partial CSS. |
Build a polygon with the editor
- Choose the closest preset. Pick the triangle, diamond, pentagon, hexagon, star, chevron, message bubble, or parallelogram that most closely resembles your target. Presets are useful because they give you a sensible starting arrangement instead of requiring you to invent the first three points from nothing. You can refine the result afterward rather than treating the preset as the final design.
- Edit the percentage coordinate pairs. The list is comma-separated, and every point contains an x percentage followed by a y percentage. For example, 50% 0%, 100% 100%, 0% 100% places one point at the top center and two points at the lower corners. The order is significant because the browser follows the list and draws straight segments between each pair. Editing one coordinate at a time makes it easier to identify which change affected the outline.
- Check the preview at the intended aspect ratio. The generated polygon() value is applied to a real block in the preview. Check that result in a box resembling the element you plan to clip. A square preview can make a star look balanced, while the same points on a wide rectangle can appear stretched. A good preview in the editor is therefore a starting check, not a substitute for testing the final page.
- Copy the declaration and test the real page. The output is a complete clip-path declaration ready for a stylesheet or inline style. Apply it to the intended element, then inspect its layout, keyboard focus, pointer behavior, and appearance across responsive breakpoints. Copy the CSS only after the shape remains clear at the sizes your audience will use.
The generator validates the coordinate syntax and percentage bounds, but valid syntax does not guarantee an attractive or useful outline. Treat the preview as a way to inspect the shape, then make design and accessibility decisions in the final page.
How percentages respond to different boxes
The same coordinate list does not represent the same visual proportions on every element. Because the percentages are resolved against the reference box, a polygon scales when its width or height changes. If the proportions of that box change too, the resulting silhouette can look wider, taller, or more stretched.
This behavior is useful when the goal is a shape that responds to its container. It can also surprise you when a shape designed in a square preview is applied to a banner, card, or narrow sidebar. Test the final element at its intended sizes and at the breakpoints where its box changes substantially.
| Question | What to expect |
|---|---|
| Does the polygon close automatically? | Yes. The browser joins the last vertex back to the first. |
| Does point order matter? | Yes. Reordering the same coordinates can create a different outline. |
| How are concave shapes formed? | Some vertices fold inward, as the star and chevron presets deliberately do. |
| Will identical percentages look identical on different boxes? | Not necessarily. Their scale depends on the width-to-height ratio of each reference box. |
| What happens outside the polygon? | That part of the element is not painted. |
| Does clipping change the layout box? | No. Surrounding elements still use the original rectangular box. |
Apply the CSS without breaking the page
Paste the copied declaration into the rule for the target element, or place it in an inline style when that suits your implementation. The complete declaration is ready to use, but the surrounding CSS still determines the element's dimensions, position, and overflow behavior. Make those choices separately rather than expecting clip-path to resize or reposition the element.
Use the MDN clip-path reference to review property behavior and current browser support, and consult the W3C CSS Shapes Module Level 1 for the underlying clipping and shape definitions. Check support for the browsers required by your audience. When the silhouette is decorative rather than essential, provide a sensible rectangular fallback.
Keep clipping separate from layout
The clip-path property controls what is painted, not where the element occupies space. The element keeps its original rectangular layout box even when a corner or side is hidden. This means a clipped diagonal edge does not automatically create matching empty space for neighboring content. If the surrounding layout depends on the silhouette, calculate and test that space separately.
Protect text, images, and controls
Do not clip away essential text, keyboard focus indicators, or touch targets. A clipped corner can also reduce the visible or interactive area, so test controls with both a pointer and a keyboard. Avoid using a decorative silhouette as the only signal that a control's purpose has changed.
For images, preserve meaningful alternative text. A visually clipped image still downloads at its original dimensions, so clipping cannot reduce file size. It can also conceal part of the image that alternative text does not adequately describe. Check the actual image, its alternative text, and its purpose together before publishing the effect.
Correct the common beginner problems
- The outline looks stretched. Check the preview and final page at the element's real aspect ratio. Percentages scale with the reference box, so a shape balanced in a square preview may look different on a wide or narrow element.
- The polygon has an unexpected outline. Review the point order. The browser follows the list, closes it automatically, and can create a different shape when the same vertices are rearranged.
- The fill looks surprising. Self-intersecting polygons can produce confusing results. The tool checks syntax and bounds but cannot guarantee that every point order is visually useful. Simplify the path or reorder the points before copying it.
- Important content disappears. Expand the clipping region or remove the clip when text, focus indicators, or touch targets extend beyond it. Clipping should support the design without removing the interface people need.
- The target needs a circle, ellipse, curve, or SVG path. This generator focuses on numeric polygon() values. It does not create circles, ellipses, inset shapes, SVG paths, curve commands, or vendor-specific fallbacks.
- An animation jumps between shapes. Animating between polygons generally works best when both shapes have the same number of vertices in compatible order. Treat matching vertex structure as an important part of the transition, not just the final appearance.
A dependable beginner workflow is simple: start from the closest preset, change one coordinate at a time, watch the real preview, and test the copied declaration in its intended layout. The generator handles valid polygon serialization; the final page still needs testing for readability, accessibility, responsiveness, and safe interaction.