Free CSS clip-path Generator
Something not working? Report a problem
About the Clip-path Generator
Build CSS clip-path shapes visually — drag handles to define polygon, circle or ellipse paths, see a live preview and copy the ready-to-paste CSS, all in your browser.
How to use the Clip-path Generator
- 1Choose a shape type — Polygon, Circle, or Ellipse.
- 2Drag the handles on the preview to reshape the clipped area.
- 3See the live preview update in real time as you drag.
- 4Copy the generated CSS and paste it into your stylesheet.
Frequently asked questions
What is CSS clip-path?
clip-path is a CSS property that hides parts of an element outside a defined shape. You can use polygons, circles, ellipses, or SVG paths to create irregular silhouettes, image masks, and decorative section dividers.
Which browsers support clip-path?
All modern browsers (Chrome, Firefox, Safari, Edge) support clip-path with no prefix. IE11 only supports the url() form — the shape functions used here are not supported in IE.
How do I animate a clip-path?
Pair clip-path with a CSS transition or animation. Both start and end values must be the same shape type with the same number of points. For example, transitioning between two polygon() values with 4 points each works smoothly.
Is this tool client-side only?
Yes — all processing happens in your browser. No data is sent to a server.