CSS Clip Path Generator
Generate CSS clip-path shapes online for free — pick from polygons, circles and more with a live preview, then copy the code. Runs in your browser.
100% private — runs entirely in your browser. Your files never leave your device.
clip-path crops an element to a shape without editing the image. Pick a preset to preview and copy
the CSS — polygon points are percentages, so shapes scale with the element. Runs entirely in your browser.
How to use the CSS Clip Path Generator
- Pick a shape from the gallery.
- See it applied to the live preview.
- Copy the clip-path CSS (with -webkit- prefix).
What you can use it for
- Crop elements into polygons and circles
- Create angled sections and shaped images
- Design arrows, badges and callouts
- Grab ready clip-path CSS
More free tools
Styling a website?
Generate shadows, gradients, layouts and effects with our free CSS tools — copy the code and go.
Frequently asked questions
What is clip-path?
A CSS property that crops an element to a shape (polygon, circle, ellipse, inset) without editing the underlying image.
Do the shapes scale?
Yes — polygon points use percentages, so the shape scales with the element's size.
Do I need a prefix?
Older WebKit needs -webkit-clip-path, which the generated code includes alongside the standard property.
Is it private?
Yes — everything runs in your browser.