CSS clip-path Generator
Visually edit CSS clip-path to crop images and elements into any shape. Polygon vertices are draggable; circle / ellipse / inset use simple inputs and sliders.
How to Use
Switch tabs between polygon, circle, ellipse, and inset.
Polygon: drag SVG points or change point count. Circle / ellipse / inset: type values or use sliders.
Confirm with the live preview and copy. Presets give you triangle, star, message bubble, and other common shapes instantly.
FAQ
What is clip-path?
A CSS property that crops an element (image or div) to an arbitrary shape. Pixels outside the shape become transparent and ignore clicks/hover.
Browser support?
polygon, circle, ellipse, and inset work in all modern browsers (Chrome 55+, Safari 9.1+, Firefox 54+, Edge 79+). Older SVG `<clipPath>` references go further back, but this tool emits only inline CSS values.
polygon vs path()?
polygon connects points with straight lines. CSS Shapes 2 also defines path() for Bézier curves, but browser support is still limited — this tool sticks to polygon.
clip-path vs mask?
clip-path is a pixel-level on/off cut. mask supports alpha (semi-transparent) blending. For simple shapes, clip-path is lighter and faster.
Is anything sent to a server?
No. All editing and preview happens in your browser; nothing leaves the page.
