Clip-Path Generator
Build a CSS clip-path visually — circle, ellipse, inset or polygon shapes.
Calculated locally in your browser.
- Switch between circle, ellipse, inset and polygon shape types.
- Pick from common preset polygons (triangle, hexagon, star, message bubble and more) and fine-tune the points directly.
- Live preview against a checkerboard background so transparency and shape edges are easy to see.
Why this is private
- Calculated locally in your browser.
- Open your browser's DevTools → Network tab while using this tool — you won't see a request carrying your input, because it never leaves your device.
- Nothing you enter is uploaded to a server or shared with us — the processing happens entirely on your device.
Overview
Builds a CSS clip-path value visually — circle, ellipse, inset (rectangle) or one of several preset polygon shapes — with a live preview and a copyable declaration.
How to use it
- 1Choose a shape type.
- 2Adjust its parameters (radius, position, inset edges, or polygon points).
- 3Copy the generated clip-path declaration.
Tips
- Polygon points are percentages of the element's own box, so the same clip-path value reshapes correctly if the element resizes — no need to recompute it for different sizes.
Frequently asked questions
What people use it for
Crop an image into a circle or hexagonPick the shape and copy the CSS onto your `<img>` or its wrapper.
Cut a diagonal or angled section dividerUse the polygon preset closest to what you need, then nudge the points.
Build a speech-bubble or ribbon shapeThe message-bubble and arrow presets are a ready-made starting point.
Create a custom badge or callout shapeStart from a preset polygon and edit the point list directly.
Related tools
All design toolsBorder Radius GeneratorBuild a CSS border-radius, with independent corners.CSS Gradient GeneratorBuild a linear or radial CSS gradient from multiple colors, with a live preview and one-click copy.Shadow GeneratorBuild a CSS box-shadow with live preview.CSS FormatterFormat and beautify CSS stylesheets.
Ready to use Clip-Path Generator?
Clip-Path Generator