◇

CSS clip-path Generator

Clip an element into common shapes and copy the clip-path CSS.

Your files stay on this device

Files are processed in your browser, never uploaded. The site downloads code and assets to run the tools. No accounts or trackers.

Use Download to save this tool as one HTML file for offline use.

Privacy →

Shape

output

Try a worked example

Example

Choose the hexagon shape to get clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);. Each pair is an x and y position inside the element, so the shape stretches with the element's width and height.

Keep in mind

Clipping hides part of the element but keeps its layout box, so neighbors do not move and the hidden corners stop receiving clicks. Borders and box shadows are clipped too; put a drop-shadow filter on a wrapper if you need a shadow.

About this tool

Pick a shape and instantly clip a preview box with the matching clip-path rule, then copy ready-to-use CSS. The preview updates live, entirely in your browser.

Frequently asked questions

How do polygon clip-paths work?

Each point is an x y percentage pair relative to the box; the browser connects them in order and shows only the area inside the outline.

Do all browsers support clip-path?

Polygon, circle, ellipse and inset shapes are supported in every modern browser, so the generated CSS works without prefixes.