CSS Clip Path Generator

How to use the css clip path generator

1. Adjust the controls and watch the preview update.
2. Read the generated CSS below the controls.
3. Copy it into your stylesheet.

About this tool

clip-path hides everything outside a shape. The element keeps its full box for layout purposes — only the painting is clipped — so neighbours are unaffected and the hidden area still occupies space.

Percentages in a polygon are relative to the element's own width and height, which means shapes stay proportional as the element resizes. That is usually what you want for a diagonal section divider, and it is why the presets here use percentages rather than pixels.

Clipping also removes the clipped area from hit-testing: clicks that land outside the shape pass through to whatever is underneath, which is often a surprise when a clipped element sits over a link.

Common uses

• Angled or curved section dividers.
• Non-rectangular image crops that stay responsive.
• Decorative shapes without an SVG or a PNG mask.

Frequently asked questions

Does clip-path change layout?

No. The element keeps its box and its space; only the painted result is clipped.

Are clicks affected?

Yes — the clipped-away area stops receiving pointer events, so clicks fall through to whatever is behind.

Should I use percentages or pixels?

Percentages, in most cases. They are relative to the element, so the shape keeps its proportions at any size.