CSS Clip Path Generator: Polygon, Circle and Shape Editor

How to use the css clip path generator

1. Choose a shape preset from the dropdown, or select Custom polygon to enter your own coordinates.
2. Adjust the numeric fields such as radius, insets or corner rounding to fine-tune the shape.
3. For custom polygons, type each vertex as x,y on its own line using percentage values from 0 to 100.
4. Copy the generated clip-path CSS property and paste it into your stylesheet.
5. Check the SVG preview to confirm the shape looks correct before shipping it.

How the CSS clip-path property works

The CSS clip-path property defines a clipping region that determines which part of an element is visible. Anything outside the path is hidden. The most versatile function is polygon(), which accepts a comma-separated list of x and y coordinates. Each coordinate can be a percentage relative to the element's reference box.

For example, a triangle pointing up inside a square element uses three vertices: polygon(50% 0%, 0% 100%, 100% 100%). The first point sits at the top center, the second at the bottom left and the third at the bottom right. The browser connects these points in order and closes the path automatically.

Besides polygons, you can use circle(), ellipse() and inset(). A circle takes a radius and an optional center position: circle(50% at 50% 50%) draws a full circle inscribed in the element. An inset clips from each edge inward, and supports a round keyword for border radii.

Preset shapes reference

This clip-path generator includes several built-in shapes. Below is a reference table showing the exact CSS value each preset produces on a square element.

You can modify any of these by switching to the custom polygon mode and adjusting the percentage coordinates.

Using the polygon editor for custom shapes

When the built-in presets do not match your design, the custom polygon editor lets you define any shape. Enter one vertex per line in the format x,y where both values are percentages between 0 and 100. The x-axis runs left to right and the y-axis runs top to bottom.

To draw a diamond, you would enter four points:

• 50,0 (top center)
• 100,50 (middle right)
• 50,100 (bottom center)
• 0,50 (middle left)

The css clip-path maker validates every line. If a coordinate is missing, out of range or not a number, the tool shows an error instead of generating broken CSS. This prevents subtle layout bugs caused by malformed polygon() values.

Browser support and fallbacks

The clip-path property with polygon(), circle(), ellipse() and inset() functions is supported in all modern browsers including Chrome, Firefox, Safari and Edge. Older versions of Safari required the -webkit- prefix, but current releases handle the standard syntax without it.

For graceful degradation, provide a fallback style before the clipped rule. Browsers that do not understand clip-path will ignore it and render the unclipped element. You can also use the @supports query to apply alternative layouts when clipping is unavailable.

Keep in mind that clip-path affects the visual rendering and hit-testing area. Links and buttons inside a clipped region outside the path will not respond to clicks, which is important for accessibility and usability testing.

Common mistakes to avoid

A frequent error is mixing up the coordinate order. The polygon() function expects x first, then y. Writing polygon(0% 50%, 100% 50%, 50% 100%) produces a different shape than swapping those pairs.

Another issue is forgetting that percentages are relative to the element's own dimensions. A 200 by 100 pixel element with polygon(50% 0%, 100% 100%, 0% 100%) places the top vertex at 100 pixels from the left, not 50 pixels. Always test your shapes at the actual rendered size.

Finally, very complex polygons with dozens of points can cause rendering jank on low-end devices. Simplify paths where possible, or consider using an SVG <clipPath> element referenced via url(#id) for intricate illustrations.

Worked examples