Free Online CSS Clip-Path Generator
Design polygon clip-paths visually and copy the CSS.
Drag any handle on the preview. Select a point to remove it, or add a new point to the longest edge.
Points are stored as percentages, so the same polygon scales to any element size. A clip-path can hide content outside the shape, but it does not remove it from the accessibility tree.
About the CSS Clip-Path Generator
The CSS clip-path property lets you cut an element into a custom shape. Instead of showing a
rectangle, the browser reveals only the area inside a path that you define. Designers use clip paths for
angled hero sections, image masks, geometric cards, badges, ribbons, and decorative backgrounds. Because the
shape is calculated by the browser, it stays crisp at every resolution and costs far less than loading a
pre-cut image.
This editor focuses on the polygon() function, which is the most widely supported clip-path
shape. Every point is stored as an X/Y percentage pair, so a polygon drawn on the preview keeps its
proportions when you apply it to a button, a card, or a full-width banner. Drag the handles to reshape the
polygon, click a point in the list to select it, add a point at the midpoint of the longest edge, or remove
the selected point. The generated CSS updates live and can be copied with one click.
How polygon coordinates work
- X values run from 0% at the left edge to 100% at the right edge.
- Y values run from 0% at the top edge to 100% at the bottom edge.
- At least three points are required to form a visible polygon.
- Order matters. Points are connected in the order they appear, and the last point connects back to the first.
- Self-intersections can create unexpected holes or overlapping areas, so keep the outline simple.
Practical tips
- Leave room inside the shape for important text. Clipped content is hidden, not reflowed.
- Use percentages instead of pixels when the element needs to resize with its container.
- Add a fallback background for browsers that do not support the property.
- Test on touch screens. Small handles are harder to grab, so this editor keeps them large.
How to use the editor
- Choose a preset as a starting point.
- Drag the handles to adjust the shape, or add and remove points.
- Copy the generated CSS and apply it to the element of your choice.
- Resize the element to confirm that the percentage-based polygon still looks correct.
Frequently asked questions
Does clip-path work in every browser?
Modern versions of Chrome, Edge, Firefox, and Safari support polygon(). Very old browsers ignore the declaration and show the full rectangle, which is usually an acceptable fallback.
Can I animate the polygon?
Yes, as long as both keyframes contain the same number of points. Animating between different point counts is not interpolated reliably. Keep the point count fixed and move the coordinates instead.
Why does my clipped content disappear?
The shape may be outside the visible area, the points may be in the wrong order, or the element may have no height. Check that the polygon has at least three points and that the target element has a visible background or content.